sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -36,14 +36,14 @@ function FileModificationCard({
           <ChevronRight className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
         )}
         <FileCode className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
-        <span className="text-xs font-mono text-gray-700 truncate flex-1">
+        <span id="file-modification-card-span-modificationfilepath" className="text-xs font-mono text-gray-700 truncate flex-1">
           {modification.filePath}
         </span>
       </button>
 
       {/* Explanation */}
       <div className="px-2 pb-2">
-        <p className="text-[10px] text-gray-500">{modification.explanation}</p>
+        <p id="file-modification-card-p-modificationexplanat" className="text-[10px] text-gray-500">{modification.explanation}</p>
       </div>
 
       {/* Expanded Diff */}
@@ -78,7 +78,7 @@ function FileModificationCard({
 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">
+      <span id="h-m-r-status-badge-span" className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
         <Loader2 className="h-3 w-3 animate-spin" />
         Refreshing...
       </span>
@@ -87,7 +87,7 @@ function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
 
   if (status === "reviewing") {
     return (
-      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">
+      <span id="h-m-r-status-badge-span" className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">
         <Check className="h-3 w-3" />
         Changes Live
       </span>
@@ -142,10 +142,10 @@ export function ApplyFirstPreview({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Zap className={cn("h-4 w-4", isPreviewMode ? "text-blue-600" : "text-green-600")} />
-          <span className="text-xs font-semibold text-gray-900">
+          <span id="apply-first-preview-span-ispreviewmode-propos" className="text-xs font-semibold text-gray-900">
             {isPreviewMode ? "Proposed Changes" : "Changes Applied"}
           </span>
-          <span className={cn(
+          <span id="apply-first-preview-span-filecount-filefileco" className={cn(
             "text-[10px] px-1.5 py-0.5 rounded font-medium",
             isPreviewMode 
               ? "bg-blue-200 text-blue-700" 
@@ -163,7 +163,7 @@ export function ApplyFirstPreview({
       {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" />
-          <span className="text-xs text-amber-700">
+          <span id="apply-first-preview-span" className="text-xs text-amber-700">
             <strong>Stale session detected.</strong> The backup files may no longer exist.
             Use &quot;Force Clear&quot; to dismiss this panel.
           </span>
@@ -171,7 +171,7 @@ export function ApplyFirstPreview({
       ) : 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">
+          <span id="apply-first-preview-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>
@@ -179,7 +179,7 @@ export function ApplyFirstPreview({
       ) : (
         <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">
+          <span id="apply-first-preview-span" className="text-xs text-blue-700">
             <strong>Changes are live!</strong> Scroll around to see the actual result.
             Your original files are safely backed up.
           </span>
@@ -202,7 +202,7 @@ export function ApplyFirstPreview({
       {!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">
+          <span id="apply-first-preview-span-navigating-away-will" className="text-xs text-amber-700">
             Navigating away will automatically revert changes. Make sure to accept or revert first.
           </span>
         </div>

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

@@ -3,7 +3,7 @@
 import React, { useRef, useEffect } from "react";
 import { User, Bot, AlertCircle, CheckCircle, RotateCcw } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { ChatMessage } from "../types";
+import { ChatMessage, ApplyFirstStatus } from "../types";
 import { InlineDiffPreview } from "./InlineDiffPreview";
 
 export interface ChatHistoryProps {
@@ -11,6 +11,8 @@ export interface ChatHistoryProps {
   onAcceptChanges?: (messageId: string) => void;
   onRevertChanges?: (messageId: string) => void;
   visionMode?: boolean;
+  // Live status for the most recent action
+  liveStatus?: ApplyFirstStatus;
 }
 
 export function ChatHistory({
@@ -18,6 +20,7 @@ export function ChatHistory({
   onAcceptChanges,
   onRevertChanges,
   visionMode = false,
+  liveStatus,
 }: ChatHistoryProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -74,10 +77,10 @@ export function ChatHistory({
             {/* Role Label + Timestamp */}
             {message.role !== "system" && (
               <div className="flex items-center gap-2 mb-1">
-                <span className="text-[11px] font-semibold text-foreground">
+                <span id="span-messagerole-user-you" className="text-[11px] font-semibold text-foreground">
                   {message.role === "user" ? "You" : "AI Assistant"}
                 </span>
-                <span className="text-[10px] text-foreground-muted">
+                <span id="span-formattimemessagetim" className="text-[10px] text-foreground-muted">
                   {formatTime(message.timestamp)}
                 </span>
               </div>
@@ -92,7 +95,7 @@ export function ChatHistory({
                 message.role === "system" && "text-xs text-foreground-muted italic"
               )}
             >
-              <p className="whitespace-pre-wrap">{message.content}</p>
+              <p id="p-messagecontent" className="whitespace-pre-wrap">{message.content}</p>
             </div>
 
             {/* Inline Diff Preview for actions */}
@@ -102,6 +105,7 @@ export function ChatHistory({
                   action={message.action}
                   onAccept={() => onAcceptChanges?.(message.id)}
                   onRevert={() => onRevertChanges?.(message.id)}
+                  liveStatus={message.action.status === "pending" ? liveStatus : undefined}
                 />
               </div>
             )}
@@ -112,19 +116,19 @@ export function ChatHistory({
                 {message.action.status === "accepted" && (
                   <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded-md">
                     <CheckCircle className="h-3 w-3" />
-                    <span>Changes accepted</span>
+                    <span id="span-changes-accepted">Changes accepted</span>
                   </div>
                 )}
                 {message.action.status === "reverted" && (
                   <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs rounded-md">
                     <RotateCcw className="h-3 w-3" />
-                    <span>Changes reverted</span>
+                    <span id="span-changes-reverted">Changes reverted</span>
                   </div>
                 )}
                 {message.action.status === "error" && (
                   <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs rounded-md">
                     <AlertCircle className="h-3 w-3" />
-                    <span>Error occurred</span>
+                    <span id="span-error-occurred">Error occurred</span>
                   </div>
                 )}
               </div>

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

@@ -88,6 +88,11 @@ export interface ChatInterfaceProps {
   visionFocusedElements?: VisionFocusedElement[];
   onVisionEditComplete?: (result: VisionPendingEdit) => void;
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
+  // Apply-first session state for inline display in chat
+  applyFirstSession?: ApplyFirstSession | null;
+  applyFirstStatus?: "idle" | "generating" | "previewing" | "applying" | "waiting-hmr" | "reviewing" | "accepting" | "reverting" | "error";
+  onApplyFirstAccept?: () => Promise<void>;
+  onApplyFirstRevert?: () => Promise<void>;
 }
 
 // Helper to generate a unique session ID
@@ -110,10 +115,15 @@ export function ChatInterface({
   visionFocusedElements = [],
   onVisionEditComplete,
   onApplyFirstComplete,
+  applyFirstSession,
+  applyFirstStatus = "idle",
+  onApplyFirstAccept,
+  onApplyFirstRevert,
 }: ChatInterfaceProps) {
   // Session management
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [sessionsInitialized, setSessionsInitialized] = useState(false);
   
   // Processing state
   const [isProcessing, setIsProcessing] = useState(false);
@@ -159,11 +169,13 @@ export function ChatInterface({
     } catch (e) {
       console.warn('Failed to load chat sessions from localStorage:', e);
     }
+    // Mark as initialized regardless of whether we found sessions
+    setSessionsInitialized(true);
   }, []);
 
-  // Create initial session if none exist
+  // Create initial session if none exist (only after initialization is complete)
   useEffect(() => {
-    if (sessions.length === 0) {
+    if (sessionsInitialized && sessions.length === 0) {
       const initialSession: ChatSession = {
         id: generateSessionId(),
         name: "New Chat",
@@ -175,7 +187,7 @@ export function ChatInterface({
       setSessions([initialSession]);
       setActiveSessionId(initialSession.id);
     }
-  }, [sessions.length, visionMode]);
+  }, [sessionsInitialized, sessions.length, visionMode]);
 
   // Persist sessions to localStorage
   useEffect(() => {
@@ -602,17 +614,45 @@ export function ChatInterface({
   };
 
   // Handle accept/revert from inline diff preview
-  const handleAcceptChanges = useCallback((messageId: string) => {
+  const handleAcceptChanges = useCallback(async (messageId: string) => {
     console.log("[Chat] Accept changes for message:", messageId);
-    updateMessageAction(messageId, "accepted");
-    // TODO: Call actual accept API based on message's action.sessionId
-  }, [updateMessageAction]);
+    // Call actual accept API if we have an active session
+    if (onApplyFirstAccept && applyFirstSession) {
+      try {
+        // Call async accept - parent will set status to "accepting"
+        await onApplyFirstAccept();
+        // Brief delay so user sees the "Accepting..." state
+        await new Promise(resolve => setTimeout(resolve, 500));
+        // Update message status after accept completes
+        updateMessageAction(messageId, "accepted");
+      } catch (error) {
+        console.error("[Chat] Accept failed:", error);
+        // Keep pending on error so user can retry
+      }
+    } else {
+      updateMessageAction(messageId, "accepted");
+    }
+  }, [updateMessageAction, onApplyFirstAccept, applyFirstSession]);
 
-  const handleRevertChanges = useCallback((messageId: string) => {
+  const handleRevertChanges = useCallback(async (messageId: string) => {
     console.log("[Chat] Revert changes for message:", messageId);
-    updateMessageAction(messageId, "reverted");
-    // TODO: Call actual revert API based on message's action.sessionId
-  }, [updateMessageAction]);
+    // Call actual revert API if we have an active session
+    if (onApplyFirstRevert && applyFirstSession) {
+      try {
+        // Call async revert - parent will set status to "reverting"
+        await onApplyFirstRevert();
+        // Brief delay so user sees the "Reverting..." state
+        await new Promise(resolve => setTimeout(resolve, 500));
+        // Update message status after revert completes
+        updateMessageAction(messageId, "reverted");
+      } catch (error) {
+        console.error("[Chat] Revert failed:", error);
+        // Keep pending on error so user can retry
+      }
+    } else {
+      updateMessageAction(messageId, "reverted");
+    }
+  }, [updateMessageAction, onApplyFirstRevert, applyFirstSession]);
 
   return (
     <div className="flex flex-col h-full">
@@ -628,7 +668,7 @@ export function ChatInterface({
           )}
         >
           <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
-          <span className="flex-1">{toastMessage.message}</span>
+          <span id="span-toastmessagemessage" className="flex-1">{toastMessage.message}</span>
           <button 
             onClick={() => setToastMessage(null)}
             className="p-0.5 hover:bg-white/20 rounded flex-shrink-0 transition-colors"
@@ -654,15 +694,15 @@ export function ChatInterface({
             <Eye className="h-3 w-3 text-white" />
           </div>
           <div className="flex-1">
-            <p className="text-[11px] font-semibold text-purple-700 dark:text-purple-300">Vision Mode Active</p>
-            <p className="text-[10px] text-purple-500 dark:text-purple-400">
+            <p id="p-vision-mode-active" className="text-[11px] font-semibold text-purple-700 dark:text-purple-300">Vision Mode Active</p>
+            <p id="p-visionfocusedelement" className="text-[10px] text-purple-500 dark:text-purple-400">
               {visionFocusedElements.length > 0 
                 ? `${visionFocusedElements.length} element${visionFocusedElements.length > 1 ? 's' : ''} selected`
                 : 'Click elements to focus AI attention'}
             </p>
           </div>
           {visionFocusedElements.length > 0 && (
-            <span className="text-xs px-2 py-0.5 bg-purple-500 text-white rounded-full font-medium">
+            <span id="span-visionfocusedelement" className="text-xs px-2 py-0.5 bg-purple-500 text-white rounded-full font-medium">
               {visionFocusedElements.length}
             </span>
           )}
@@ -676,6 +716,7 @@ export function ChatInterface({
           onAcceptChanges={handleAcceptChanges}
           onRevertChanges={handleRevertChanges}
           visionMode={visionMode}
+          liveStatus={applyFirstStatus}
         />
       ) : (
         /* Empty State */
@@ -683,8 +724,8 @@ export function ChatInterface({
           <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#00A3E1] to-[#00D3C8] flex items-center justify-center mb-3 shadow-lg">
             <Sparkles className="h-5 w-5 text-white" />
           </div>
-          <p className="text-xs font-medium text-foreground mb-1">AI Design Assistant</p>
-          <p className="text-[10px] text-foreground-muted max-w-[180px]">
+          <p id="p-ai-design-assistant" className="text-xs font-medium text-foreground mb-1">AI Design Assistant</p>
+          <p id="p-visionmode-click-ele" className="text-[10px] text-foreground-muted max-w-[180px]">
             {visionMode 
               ? "Click elements or draw a focus area, then describe changes"
               : componentType === "all" 
@@ -699,7 +740,7 @@ export function ChatInterface({
         {/* Annotation indicator */}
         {annotatedScreenshot && visionMode && (
           <div className="flex items-center justify-between text-[10px] text-[#00D3C8] bg-gradient-to-r from-[#00D3C8]/10 to-transparent dark:from-[#00D3C8]/20 px-3 py-1.5 rounded-lg mb-2">
-            <span className="flex items-center gap-1.5 font-medium">
+            <span id="span-title" className="flex items-center gap-1.5 font-medium">
               <Crop className="h-3 w-3" />
               Focus area selected
             </span>
@@ -725,7 +766,7 @@ export function ChatInterface({
               <Loader2 className="h-4 w-4 animate-spin" />
               <div className="absolute inset-0 rounded-full animate-ping opacity-20 bg-current" />
             </div>
-            <span className="font-medium">
+            <span id="span-visionmode-analyzing" className="font-medium">
               {visionMode ? "Analyzing page..." : "Generating changes..."}
             </span>
           </div>
@@ -850,7 +891,7 @@ export function ChatInterface({
         </div>
 
         {/* Quick tip */}
-        <p className="text-[9px] text-foreground-muted text-center mt-2">
+        <p id="p-press-enter-to-send-" className="text-[9px] text-foreground-muted text-center mt-2">
           Press Enter to send • Keep chatting to refine changes
         </p>
       </div>

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

@@ -45,7 +45,7 @@ export function ChatTabBar({
             onClick={() => onSelectSession(session.id)}
           >
             <MessageSquare className="h-3 w-3 flex-shrink-0" />
-            <span className="truncate max-w-[72px]">
+            <span id="chat-tab-bar-span-getsessionnamesessio" className="truncate max-w-[72px]">
               {getSessionName(session, index)}
             </span>
             {/* Close button - only show if more than 1 session */}

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

@@ -118,7 +118,7 @@ export function DiffPreview({
       {/* Live Preview Indicator */}
       <div className="flex items-center gap-2 p-2 rounded bg-[#00A3E1]/10 border border-[#00A3E1]/30">
         <Eye className="h-3.5 w-3.5 text-[#00A3E1]" />
-        <span className="text-xs text-[#00A3E1]">
+        <span id="span-live-preview-active-" className="text-xs text-[#00A3E1]">
           Live preview active - scroll to see changes on the page
         </span>
       </div>