sonance-brand-mcp 1.3.110 → 1.3.111

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

@@ -1,11 +1,21 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Loader2, Send, Sparkles, Eye, AlertCircle, X, Crop } from "lucide-react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Loader2, Send, Sparkles, Eye, AlertCircle, X, Crop, User, Bot } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { ChatMessage, AIEditResult, PendingEdit, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession } from "../types";
+import { 
+  ChatMessage, 
+  ChatSession, 
+  AIEditResult, 
+  PendingEdit, 
+  VisionFocusedElement, 
+  VisionPendingEdit, 
+  ApplyFirstSession 
+} from "../types";
 import html2canvas from "html2canvas-pro";
 import { ScreenshotAnnotator, Rectangle } from "./ScreenshotAnnotator";
+import { ChatTabBar } from "./ChatTabBar";
+import { ChatHistory } from "./ChatHistory";
 
 // Helper to detect location failure in explanation
 function isLocationFailure(explanation: string | undefined): boolean {
@@ -22,7 +32,6 @@ function isLocationFailure(explanation: string | undefined): boolean {
 
 /**
  * Draw a section highlight border on a screenshot image
- * This helps the LLM visually identify the target section for modifications
  */
 function drawSectionHighlight(
   screenshotDataUrl: string,
@@ -36,16 +45,13 @@ function drawSectionHighlight(
       canvas.height = img.height;
       const ctx = canvas.getContext('2d')!;
       
-      // Draw original screenshot
       ctx.drawImage(img, 0, 0);
       
-      // Draw section highlight border (teal/cyan to match Sonance brand)
       ctx.strokeStyle = '#00D3C8';
       ctx.lineWidth = 3;
-      ctx.setLineDash([8, 4]); // Dashed line for visibility
+      ctx.setLineDash([8, 4]);
       ctx.strokeRect(sectionCoords.x, sectionCoords.y, sectionCoords.width, sectionCoords.height);
       
-      // Semi-transparent fill to subtly highlight the area
       ctx.fillStyle = 'rgba(0, 211, 200, 0.08)';
       ctx.fillRect(sectionCoords.x, sectionCoords.y, sectionCoords.width, sectionCoords.height);
       
@@ -75,18 +81,21 @@ export interface ChatInterfaceProps {
   onSaveRequest: (edit: PendingEdit) => void;
   pendingEdit: PendingEdit | null;
   onClearPending: () => void;
-  // Variant-scoped editing
   editScope?: "component" | "variant";
   variantId?: string | null;
   variantStyles?: VariantStyles | null;
-  // Vision mode props
   visionMode?: boolean;
   visionFocusedElements?: VisionFocusedElement[];
   onVisionEditComplete?: (result: VisionPendingEdit) => void;
-  // Apply-first mode - NEW: writes files immediately
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
 }
 
+// Helper to generate a unique session ID
+const generateSessionId = () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+
+// Local storage key for sessions
+const SESSIONS_STORAGE_KEY = 'sonance-devtools-chat-sessions';
+
 export function ChatInterface({
   componentType,
   componentName,
@@ -102,20 +111,83 @@ export function ChatInterface({
   onVisionEditComplete,
   onApplyFirstComplete,
 }: ChatInterfaceProps) {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState("");
+  // Session management
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  
+  // Processing state
   const [isProcessing, setIsProcessing] = useState(false);
+  const [input, setInput] = useState("");
   const [toastMessage, setToastMessage] = useState<{ message: string; type: 'error' | 'warning' } | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  
   const inputRef = useRef<HTMLInputElement>(null);
   
   // Screenshot annotation state
   const [isAnnotating, setIsAnnotating] = useState(false);
   const [annotatedScreenshot, setAnnotatedScreenshot] = useState<string | null>(null);
   const [manualFocusBounds, setManualFocusBounds] = useState<Rectangle | null>(null);
-  // Discovered elements from annotation tool (for targeting when no element was clicked)
   const [annotationDiscoveredElements, setAnnotationDiscoveredElements] = useState<VisionFocusedElement[]>([]);
   
+  // Get current session and messages
+  const activeSession = useMemo(() => 
+    sessions.find(s => s.id === activeSessionId) || null, 
+    [sessions, activeSessionId]
+  );
+  const messages = activeSession?.messages || [];
+
+  // Initialize sessions from localStorage on mount
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(SESSIONS_STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Convert date strings back to Date objects
+        const hydratedSessions: ChatSession[] = parsed.map((s: ChatSession) => ({
+          ...s,
+          createdAt: new Date(s.createdAt),
+          updatedAt: new Date(s.updatedAt),
+          messages: s.messages.map((m: ChatMessage) => ({
+            ...m,
+            timestamp: new Date(m.timestamp),
+          })),
+        }));
+        setSessions(hydratedSessions);
+        if (hydratedSessions.length > 0) {
+          setActiveSessionId(hydratedSessions[0].id);
+        }
+      }
+    } catch (e) {
+      console.warn('Failed to load chat sessions from localStorage:', e);
+    }
+  }, []);
+
+  // Create initial session if none exist
+  useEffect(() => {
+    if (sessions.length === 0) {
+      const initialSession: ChatSession = {
+        id: generateSessionId(),
+        name: "New Chat",
+        messages: [],
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        context: { visionMode },
+      };
+      setSessions([initialSession]);
+      setActiveSessionId(initialSession.id);
+    }
+  }, [sessions.length, visionMode]);
+
+  // Persist sessions to localStorage
+  useEffect(() => {
+    if (sessions.length > 0) {
+      try {
+        localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
+      } catch (e) {
+        console.warn('Failed to save chat sessions to localStorage:', e);
+      }
+    }
+  }, [sessions]);
+  
   // Auto-dismiss toast after 5 seconds
   useEffect(() => {
     if (toastMessage) {
@@ -124,10 +196,63 @@ export function ChatInterface({
     }
   }, [toastMessage]);
 
-  // Scroll to bottom when messages change
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  // Session management handlers
+  const createSession = useCallback(() => {
+    const newSession: ChatSession = {
+      id: generateSessionId(),
+      name: "New Chat",
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      context: { visionMode },
+    };
+    setSessions(prev => [newSession, ...prev]);
+    setActiveSessionId(newSession.id);
+  }, [visionMode]);
+
+  const closeSession = useCallback((sessionId: string) => {
+    setSessions(prev => {
+      const filtered = prev.filter(s => s.id !== sessionId);
+      // If closing active session, switch to first remaining
+      if (activeSessionId === sessionId && filtered.length > 0) {
+        setActiveSessionId(filtered[0].id);
+      }
+      return filtered;
+    });
+  }, [activeSessionId]);
+
+  const addMessage = useCallback((message: ChatMessage) => {
+    setSessions(prev => prev.map(s => 
+      s.id === activeSessionId 
+        ? { 
+            ...s, 
+            messages: [...s.messages, message],
+            updatedAt: new Date(),
+            // Update session name based on first user message
+            name: s.name === "New Chat" && message.role === "user" 
+              ? message.content.slice(0, 30) + (message.content.length > 30 ? "..." : "")
+              : s.name,
+          } 
+        : s
+    ));
+  }, [activeSessionId]);
+
+  // Update a message's action status (for accept/revert)
+  const updateMessageAction = useCallback((messageId: string, status: "pending" | "accepted" | "reverted" | "error") => {
+    setSessions(prev => prev.map(s => 
+      s.id === activeSessionId 
+        ? { 
+            ...s, 
+            messages: s.messages.map(m => 
+              m.id === messageId && m.action
+                ? { ...m, action: { ...m.action, status } }
+                : m
+            ),
+            updatedAt: new Date(),
+          } 
+        : s
+    ));
+  }, [activeSessionId]);
 
   // Dynamically discover component file path via API
   const findComponentFile = useCallback(async (): Promise<string | null> => {
@@ -154,7 +279,6 @@ export function ChatInterface({
     try {
       const canvas = await html2canvas(document.body, {
         ignoreElements: (element) => {
-          // Exclude DevTools overlay and vision mode border
           return (
             element.hasAttribute("data-sonance-devtools") ||
             element.hasAttribute("data-vision-mode-border")
@@ -162,7 +286,7 @@ export function ChatInterface({
         },
         useCORS: true,
         allowTaint: true,
-        scale: 1, // Lower scale for smaller file size
+        scale: 1,
       });
 
       return canvas.toDataURL("image/png", 0.8);
@@ -172,38 +296,26 @@ export function ChatInterface({
     }
   }, []);
 
-  // Start screenshot annotation - show drawing overlay on live app
+  // Start screenshot annotation
   const startAnnotation = useCallback(() => {
     console.log("[Vision Mode] Starting screenshot annotation overlay...");
     setIsAnnotating(true);
   }, []);
 
-  // Handle annotation confirmation - screenshot is already captured and annotated
-  // Now also receives discovered elements from within the drawn rectangle
+  // Handle annotation confirmation
   const handleAnnotationConfirm = useCallback((annotated: string, bounds: Rectangle, discoveredElements: VisionFocusedElement[]) => {
-    console.log("[Vision Mode] Annotation confirmed:", { 
-      bounds, 
-      discoveredElementsCount: discoveredElements.length,
-      discoveredElements: discoveredElements.map(e => ({
-        name: e.name,
-        text: e.textContent?.substring(0, 30),
-        id: e.elementId,
-      })),
-    });
+    console.log("[Vision Mode] Annotation confirmed:", { bounds, discoveredElementsCount: discoveredElements.length });
     setAnnotatedScreenshot(annotated);
     setManualFocusBounds(bounds);
     setAnnotationDiscoveredElements(discoveredElements);
     setIsAnnotating(false);
-    // Focus the input so user can type their prompt
     setTimeout(() => inputRef.current?.focus(), 100);
   }, []);
 
-  // Handle annotation cancel
   const handleAnnotationCancel = useCallback(() => {
     setIsAnnotating(false);
   }, []);
 
-  // Clear the current annotation and discovered elements
   const clearAnnotation = useCallback(() => {
     setAnnotatedScreenshot(null);
     setManualFocusBounds(null);
@@ -212,20 +324,14 @@ export function ChatInterface({
 
   // Handle vision mode edit request
   const handleVisionEdit = async (prompt: string) => {
-    // Use Apply-First mode if callback is provided (new Cursor-style workflow)
     const useApplyFirst = !!onApplyFirstComplete;
 
-    // Determine which focused elements to use:
-    // - If user clicked an element, use visionFocusedElements (passed from parent)
-    // - If user used annotation tool without clicking, use annotationDiscoveredElements
     const effectiveFocusedElements = visionFocusedElements.length > 0 
       ? visionFocusedElements 
       : annotationDiscoveredElements;
 
     console.log("[Vision Mode] Starting edit request:", {
       prompt,
-      focusedElementsFromClick: visionFocusedElements.length,
-      focusedElementsFromAnnotation: annotationDiscoveredElements.length,
       effectiveFocusedElements: effectiveFocusedElements.length,
       mode: useApplyFirst ? "apply-first" : "preview-first"
     });
@@ -237,7 +343,7 @@ export function ChatInterface({
       timestamp: new Date(),
     };
 
-    setMessages((prev) => [...prev, userMessage]);
+    addMessage(userMessage);
     setInput("");
     if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
@@ -245,63 +351,39 @@ export function ChatInterface({
     try {
       let screenshot: string | null;
 
-      // PRIORITY 1: Use manually annotated screenshot if available
-      // This is when user drew a focus area using the annotation tool
       if (annotatedScreenshot) {
-        console.log("[Vision Mode] Using manually annotated screenshot with discovered elements:", {
-          discoveredCount: annotationDiscoveredElements.length,
-          elements: annotationDiscoveredElements.slice(0, 3).map(e => ({
-            name: e.name,
-            text: e.textContent?.substring(0, 20),
-            id: e.elementId,
-          })),
-        });
         screenshot = annotatedScreenshot;
-        // Clear the annotation after use (but keep discovered elements for the API call)
         setAnnotatedScreenshot(null);
         setManualFocusBounds(null);
       } else {
-        // PRIORITY 2: Capture fresh screenshot and auto-annotate with section highlight
-        console.log("[Vision Mode] Capturing screenshot...");
         const rawScreenshot = await captureScreenshot();
-        console.log("[Vision Mode] Screenshot captured:", rawScreenshot ? `${rawScreenshot.length} bytes` : "null");
-
-        // Annotate screenshot with section highlight if parent section exists
-        // This helps the LLM visually identify the target area for modifications
         screenshot = rawScreenshot;
         if (rawScreenshot && effectiveFocusedElements.length > 0) {
           const parentSection = effectiveFocusedElements[0].parentSection;
           if (parentSection?.coordinates) {
             screenshot = await drawSectionHighlight(rawScreenshot, parentSection.coordinates);
-            console.log("[Vision Mode] Added section highlight to screenshot:", {
-              sectionType: parentSection.type,
-              sectionText: parentSection.sectionText?.substring(0, 30),
-            });
           }
         }
       }
 
-      // Choose API endpoint based on mode
       const endpoint = useApplyFirst ? "/api/sonance-vision-apply" : "/api/sonance-vision-edit";
-      console.log("[Vision Mode] Sending to API:", endpoint, {
-        effectiveFocusedElements: effectiveFocusedElements.length,
-      });
+
+      // Build chat history for context
+      const chatHistory = messages.map(m => ({ role: m.role, content: m.content }));
 
       const response = await fetch(endpoint, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          // Apply-First: write files immediately so HMR shows changes
           action: useApplyFirst ? "apply" : "edit",
           screenshot,
           pageRoute: window.location.pathname,
           userPrompt: prompt,
-          // Use effective focused elements (from click OR from annotation discovery)
           focusedElements: effectiveFocusedElements,
+          chatHistory,
         }),
       });
       
-      // Clear annotation discovered elements after API call
       setAnnotationDiscoveredElements([]);
 
       const data = await response.json();
@@ -309,19 +391,14 @@ export function ChatInterface({
         success: data.success,
         sessionId: data.sessionId,
         modificationsCount: data.modifications?.length || 0,
-        hasCss: !!data.aggregatedPreviewCSS,
-        error: data.error,
       });
 
-      // Check if this is a "location failure" case - element could not be found in code
       const hasLocationFailure = isLocationFailure(data.explanation);
       const hasNoModifications = !data.modifications || data.modifications.length === 0;
       const isElementNotFound = hasLocationFailure && hasNoModifications;
 
-      // Build appropriate message based on result
       let messageContent: string;
       if (isElementNotFound) {
-        // Element not found - provide helpful guidance
         messageContent = (data.explanation || "Could not locate the clicked element in the source code.") +
           "\n\nTry clicking on a different element or describe what you want to change in more detail.";
       } else if (data.success) {
@@ -332,36 +409,39 @@ export function ChatInterface({
         messageContent = data.error || "Failed to generate changes.";
       }
 
+      // Build assistant message with inline action for diff display
       const assistantMessage: ChatMessage = {
         id: `msg-${Date.now()}-response`,
         role: "assistant",
         content: messageContent,
         timestamp: new Date(),
+        // Add inline action if we have modifications
+        action: data.success && data.modifications && data.modifications.length > 0 ? {
+          type: "diff",
+          status: "pending",
+          sessionId: data.sessionId,
+          explanation: data.explanation,
+          files: data.modifications.map((m: { filePath: string; diff: string; originalContent?: string; modifiedContent?: string }) => ({
+            path: m.filePath,
+            diff: m.diff,
+            originalContent: m.originalContent,
+            modifiedContent: m.modifiedContent,
+          })),
+        } : undefined,
       };
 
-      setMessages((prev) => [...prev, assistantMessage]);
+      addMessage(assistantMessage);
 
-      // Handle element not found case - show toast and do NOT trigger page refresh
       if (isElementNotFound) {
-        console.log("[Vision Mode] Element not found - blocking page refresh:", {
-          explanation: data.explanation,
-          modifications: data.modifications?.length || 0,
-        });
         setToastMessage({
           message: "Could not locate the clicked element in the source code",
           type: 'warning'
         });
-        // Do NOT call onApplyFirstComplete - this prevents page refresh
         return;
       }
 
       if (data.success && data.modifications && data.modifications.length > 0) {
         if (useApplyFirst && onApplyFirstComplete) {
-          // Apply-First mode: files are already written, user can see changes via HMR
-          console.log("[Apply-First] Calling onApplyFirstComplete with:", {
-            sessionId: data.sessionId,
-            modifications: data.modifications.map((m: { filePath: string }) => m.filePath),
-          });
           onApplyFirstComplete({
             sessionId: data.sessionId,
             modifications: data.modifications,
@@ -370,19 +450,12 @@ export function ChatInterface({
             backupPaths: data.backupPaths || [],
           });
         } else if (onVisionEditComplete) {
-          // Preview-First mode (legacy): just preview CSS
-          console.log("[Vision Mode] Calling onVisionEditComplete with:", {
-            modifications: data.modifications.map((m: { filePath: string }) => m.filePath),
-            cssLength: data.aggregatedPreviewCSS?.length || 0,
-          });
           onVisionEditComplete({
             modifications: data.modifications,
             aggregatedPreviewCSS: data.aggregatedPreviewCSS || "",
             explanation: data.explanation || "",
           });
         }
-      } else if (!data.success) {
-        console.error("[Vision Mode] API returned error:", data.error);
       }
     } catch (error) {
       console.error("[Vision Mode] Request failed:", error);
@@ -392,24 +465,21 @@ export function ChatInterface({
         content: error instanceof Error ? error.message : "Vision mode error occurred",
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev, errorMessage]);
+      addMessage(errorMessage);
     } finally {
       setIsProcessing(false);
     }
   };
 
   const handleSend = async (prompt: string) => {
-    // Fallback: read from DOM if React state is empty (browser automation compatibility)
     const actualPrompt = prompt || inputRef.current?.value || "";
     
     if (!actualPrompt.trim() || isProcessing) return;
 
-    // Use vision mode handler if vision mode is active
     if (visionMode) {
       return handleVisionEdit(actualPrompt);
     }
 
-    // If no component is selected, intercept the request
     if (componentType === "all") {
       const userMessage: ChatMessage = {
         id: `msg-${Date.now()}`,
@@ -417,7 +487,7 @@ export function ChatInterface({
         content: actualPrompt,
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev, userMessage]);
+      addMessage(userMessage);
       setInput("");
       if (inputRef.current) inputRef.current.value = "";
       
@@ -428,7 +498,7 @@ export function ChatInterface({
           content: "Please select a component using the cursor icon in the header to edit it.",
           timestamp: new Date(),
         };
-        setMessages((prev) => [...prev, assistantMessage]);
+        addMessage(assistantMessage);
       }, 300);
       return;
     }
@@ -440,20 +510,18 @@ export function ChatInterface({
       timestamp: new Date(),
     };
 
-    setMessages((prev) => [...prev, userMessage]);
+    addMessage(userMessage);
     setInput("");
     if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
 
     try {
-      // Dynamically find the component file
       const filePath = await findComponentFile();
       
       if (!filePath) {
-        throw new Error(`Could not locate component file for "${componentType}". The component may not exist in the expected directories.`);
+        throw new Error(`Could not locate component file for "${componentType}".`);
       }
 
-      // First, fetch the current component source
       const sourceResponse = await fetch(
         `/api/sonance-component-source?file=${encodeURIComponent(filePath)}`
       );
@@ -464,7 +532,8 @@ export function ChatInterface({
 
       const sourceData = await sourceResponse.json();
 
-      // Then, send to AI for editing
+      const chatHistory = messages.map(m => ({ role: m.role, content: m.content }));
+
       const editResponse = await fetch("/api/sonance-ai-edit", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -474,10 +543,10 @@ export function ChatInterface({
           filePath,
           currentCode: sourceData.content,
           userRequest: actualPrompt,
-          // Variant-scoped editing context
           editScope,
           variantId: editScope === "variant" ? variantId : undefined,
           variantStyles: editScope === "variant" ? variantStyles : undefined,
+          chatHistory,
         }),
       });
 
@@ -491,20 +560,30 @@ export function ChatInterface({
           : editData.error || "Failed to generate changes.",
         timestamp: new Date(),
         editResult: editData,
+        // Add inline action for component edit diffs
+        action: editData.success && editData.modifiedCode ? {
+          type: "diff",
+          status: "pending",
+          explanation: editData.explanation,
+          files: [{
+            path: filePath,
+            diff: editData.diff || "",
+            originalContent: sourceData.content,
+            modifiedContent: editData.modifiedCode,
+          }],
+        } : undefined,
       };
 
-      setMessages((prev) => [...prev, assistantMessage]);
+      addMessage(assistantMessage);
 
       if (editData.success && editData.modifiedCode) {
         onEditComplete(editData);
-        // Set up pending edit for save
         onSaveRequest({
           filePath,
           originalCode: sourceData.content,
           modifiedCode: editData.modifiedCode,
           diff: editData.diff || "",
           explanation: editData.explanation || "",
-          // AI-provided CSS for live preview (no parsing needed)
           previewCSS: editData.previewCSS || "",
         });
       }
@@ -516,238 +595,267 @@ export function ChatInterface({
         timestamp: new Date(),
         editResult: { success: false, error: String(error) },
       };
-      setMessages((prev) => [...prev, errorMessage]);
+      addMessage(errorMessage);
     } finally {
       setIsProcessing(false);
     }
   };
 
+  // Handle accept/revert from inline diff preview
+  const handleAcceptChanges = useCallback((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]);
+
+  const handleRevertChanges = useCallback((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]);
+
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col h-full">
       {/* Toast Notification */}
       {toastMessage && (
         <div 
           className={cn(
-            "flex items-center gap-2 p-3 rounded-md text-sm animate-in slide-in-from-top-2",
+            "flex items-center gap-2 px-3 py-2 rounded-lg text-xs shadow-lg mb-2",
+            "animate-in slide-in-from-top-2 duration-200",
             toastMessage.type === 'error' 
-              ? "bg-red-50 border border-red-200 text-red-700"
-              : "bg-amber-50 border border-amber-200 text-amber-700"
+              ? "bg-red-500 text-white"
+              : "bg-amber-500 text-white"
           )}
         >
-          <AlertCircle className="h-4 w-4 flex-shrink-0" />
+          <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
           <span className="flex-1">{toastMessage.message}</span>
           <button 
             onClick={() => setToastMessage(null)}
-            className="p-0.5 hover:bg-black/5 rounded"
+            className="p-0.5 hover:bg-white/20 rounded flex-shrink-0 transition-colors"
           >
             <X className="h-3 w-3" />
           </button>
         </div>
       )}
 
-      {/* Vision Mode Banner */}
+      {/* Chat Tab Bar */}
+      <ChatTabBar
+        sessions={sessions}
+        activeSessionId={activeSessionId}
+        onSelectSession={setActiveSessionId}
+        onCreateSession={createSession}
+        onCloseSession={closeSession}
+      />
+
+      {/* Vision Mode Header */}
       {visionMode && (
-        <div className="p-2 bg-purple-50 border border-purple-200 rounded-md">
-          <div className="flex items-center gap-2 text-purple-700 font-medium text-xs mb-1">
-            <Eye className="h-3 w-3" />
-            <span>Vision Mode Active</span>
+        <div className="flex items-center gap-2 px-3 py-2 bg-gradient-to-r from-purple-500/10 to-purple-600/5 dark:from-purple-500/20 dark:to-purple-600/10 border-b border-purple-200/50 dark:border-purple-700/50">
+          <div className="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center">
+            <Eye className="h-3 w-3 text-white" />
           </div>
-          {visionFocusedElements.length > 0 ? (
-            <div className="text-purple-600 text-xs">
-              {visionFocusedElements.length} element{visionFocusedElements.length !== 1 ? "s" : ""} focused
-            </div>
-          ) : (
-            <div className="text-purple-500 text-xs">
-              Click elements to focus AI attention, then describe your changes
-            </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">
+              {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">
+              {visionFocusedElements.length}
+            </span>
           )}
         </div>
       )}
 
-      {/* AI Hint - only show when no messages yet and not in vision mode */}
-      {messages.length === 0 && componentType !== "all" && !visionMode && (
-        <p className="text-xs text-gray-500 italic">
-          Describe any styling changes you'd like to make to this component.
-        </p>
+      {/* Chat History - Scrollable */}
+      {messages.length > 0 ? (
+        <ChatHistory
+          messages={messages}
+          onAcceptChanges={handleAcceptChanges}
+          onRevertChanges={handleRevertChanges}
+          visionMode={visionMode}
+        />
+      ) : (
+        /* Empty State */
+        <div className="flex-1 flex flex-col items-center justify-center py-6 px-4 text-center bg-background">
+          <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]">
+            {visionMode 
+              ? "Click elements or draw a focus area, then describe changes"
+              : componentType === "all" 
+                ? "Select a component to start editing"
+                : `Describe changes for ${componentName}`}
+          </p>
+        </div>
       )}
 
-      {/* Chat Messages */}
-      {messages.length > 0 && (
-        <div className="max-h-48 overflow-y-auto space-y-2 p-2 rounded border border-gray-200 bg-gray-50">
-          {messages.map((msg) => (
-            <div
-              key={msg.id}
-              className={cn(
-                "text-xs p-2 rounded",
-                msg.role === "user"
-                  ? "bg-[#00A3E1]/10 text-gray-800 ml-4"
-                  : "bg-white border border-gray-200 mr-4"
-              )}
+      {/* Input Area */}
+      <div className="mt-auto pt-2 border-t border-border px-3 pb-2 bg-background">
+        {/* 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">
+              <Crop className="h-3 w-3" />
+              Focus area selected
+            </span>
+            <button
+              onClick={clearAnnotation}
+              className="text-[#00D3C8] hover:text-[#00b3a8] p-1 hover:bg-[#00D3C8]/10 rounded transition-colors"
+              title="Clear focus"
             >
-              <div className="flex items-start gap-2">
-                {msg.role === "assistant" && (
-                  <Sparkles className="h-3 w-3 text-[#00A3E1] mt-0.5 flex-shrink-0" />
-                )}
-                <span id="summary-row-span-msgcontent">{msg.content}</span>
-              </div>
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        )}
+
+        {/* Processing Indicator */}
+        {isProcessing && (
+          <div className={cn(
+            "flex items-center gap-2 text-xs px-3 py-2 rounded-lg mb-2",
+            visionMode 
+              ? "bg-gradient-to-r from-purple-500/10 to-purple-600/5 dark:from-purple-500/20 dark:to-purple-600/10 text-purple-600 dark:text-purple-400" 
+              : "bg-gradient-to-r from-[#00A3E1]/10 to-[#00D3C8]/5 dark:from-[#00A3E1]/20 dark:to-[#00D3C8]/10 text-[#00A3E1]"
+          )}>
+            <div className="relative">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <div className="absolute inset-0 rounded-full animate-ping opacity-20 bg-current" />
             </div>
-          ))}
-          <div ref={messagesEndRef} />
-        </div>
-      )}
+            <span className="font-medium">
+              {visionMode ? "Analyzing page..." : "Generating changes..."}
+            </span>
+          </div>
+        )}
 
-      {/* Input */}
-      <div
-        className="flex gap-2"
-        onPointerDown={(e) => {
-          // Force focus to input when clicking anywhere in this container
-          // This bypasses modal focus traps by using requestAnimationFrame
-          e.stopPropagation();
-          const input = inputRef.current;
-          if (input && !isProcessing) {
-            // Blur any currently focused element first (escape focus trap)
-            if (document.activeElement && document.activeElement !== input) {
-              (document.activeElement as HTMLElement).blur?.();
-            }
-            // Use rAF to ensure focus happens after any focus trap logic runs
-            requestAnimationFrame(() => {
-              input.focus();
-              // Also try native focus method as fallback
-              input.click();
-            });
-          }
-        }}
-      >
-        <input
-          ref={inputRef}
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onClick={(e) => {
+        {/* Input Row */}
+        <div
+          className="flex items-center gap-2"
+          onPointerDown={(e) => {
             e.stopPropagation();
-            e.preventDefault();
-            // Force focus using multiple strategies
-            const input = inputRef.current;
-            if (input) {
-              // Escape any focus trap
-              if (document.activeElement && document.activeElement !== input) {
+            const inputEl = inputRef.current;
+            if (inputEl && !isProcessing) {
+              if (document.activeElement && document.activeElement !== inputEl) {
                 (document.activeElement as HTMLElement).blur?.();
               }
-              input.focus();
+              requestAnimationFrame(() => {
+                inputEl.focus();
+                inputEl.click();
+              });
             }
           }}
-          onPointerDown={(e) => {
-            e.stopPropagation();
-            // Don't preventDefault here - let native click handling work
-            const input = inputRef.current;
-            if (input) {
-              requestAnimationFrame(() => input.focus());
-            }
-          }}
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            const input = inputRef.current;
-            if (input) {
-              requestAnimationFrame(() => input.focus());
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSend(input || inputRef.current?.value || "");
-            }
-          }}
-          placeholder={
-            visionMode
-              ? "Describe what changes you want to make on this page..."
-              : componentType === "all"
-                ? "Select a component to start editing..."
-                : `Describe changes to ${componentName}...`
-          }
-          disabled={isProcessing}
-          className={cn(
-            "flex-1 px-3 py-2 text-xs rounded border",
-            visionMode
-              ? "border-purple-200 focus:ring-purple-500 focus:border-purple-500"
-              : "border-gray-200 focus:ring-[#00A3E1] focus:border-[#00A3E1]",
-            "focus:outline-none focus:ring-1",
-            "placeholder:text-gray-400",
-            "disabled:opacity-50 disabled:bg-gray-50"
+        >
+          {/* Annotate button - only in vision mode */}
+          {visionMode && (
+            <button
+              onClick={startAnnotation}
+              onPointerDown={(e) => e.stopPropagation()}
+              disabled={isProcessing}
+              title="Draw focus area"
+              className={cn(
+                "p-2 rounded-lg transition-all duration-200",
+                annotatedScreenshot
+                  ? "bg-[#00D3C8] text-white shadow-md shadow-[#00D3C8]/30"
+                  : "bg-secondary text-foreground-secondary hover:bg-secondary-hover hover:text-foreground",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+            >
+              <Crop className="h-4 w-4" />
+            </button>
           )}
-        />
-        
-        {/* Annotate screenshot button - only in vision mode */}
-        {visionMode && (
+
+          {/* Input Field */}
+          <div className="flex-1 relative">
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                const inputEl = inputRef.current;
+                if (inputEl) {
+                  if (document.activeElement && document.activeElement !== inputEl) {
+                    (document.activeElement as HTMLElement).blur?.();
+                  }
+                  inputEl.focus();
+                }
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                const inputEl = inputRef.current;
+                if (inputEl) {
+                  requestAnimationFrame(() => inputEl.focus());
+                }
+              }}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                const inputEl = inputRef.current;
+                if (inputEl) {
+                  requestAnimationFrame(() => inputEl.focus());
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSend(input || inputRef.current?.value || "");
+                }
+              }}
+              placeholder={
+                visionMode
+                  ? "Describe the changes you want..."
+                  : componentType === "all"
+                    ? "Select a component first..."
+                    : `What would you like to change?`
+              }
+              disabled={isProcessing}
+              className={cn(
+                "w-full px-3 py-2.5 text-xs rounded-xl border-2 transition-all duration-200",
+                "bg-background text-foreground",
+                visionMode
+                  ? "border-purple-200 dark:border-purple-700 focus:border-purple-400 dark:focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20"
+                  : "border-border focus:border-[#00A3E1] focus:ring-2 focus:ring-[#00A3E1]/20",
+                "focus:outline-none",
+                "placeholder:text-foreground-muted",
+                "disabled:opacity-50 disabled:bg-secondary",
+                "shadow-sm"
+              )}
+            />
+          </div>
+          
+          {/* Send button */}
           <button
-            onClick={startAnnotation}
+            onClick={() => handleSend(input || inputRef.current?.value || "")}
             onPointerDown={(e) => e.stopPropagation()}
-            disabled={isProcessing}
-            title="Draw on screenshot to focus AI attention"
+            disabled={isProcessing || !input.trim()}
             className={cn(
-              "px-3 py-2 rounded transition-colors",
-              annotatedScreenshot
-                ? "bg-[#00D3C8] text-[#1a1a1a]" // Teal when annotation is active
-                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
-              "disabled:opacity-50 disabled:cursor-not-allowed"
+              "p-2.5 rounded-xl transition-all duration-200 shadow-md",
+              visionMode
+                ? "bg-gradient-to-br from-purple-500 to-purple-600 text-white hover:from-purple-600 hover:to-purple-700 shadow-purple-500/30"
+                : "bg-gradient-to-br from-[#00A3E1] to-[#0090c8] text-white hover:from-[#0090c8] hover:to-[#007ab3] shadow-[#00A3E1]/30",
+              "disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none",
+              !isProcessing && input.trim() && "hover:scale-105 active:scale-95"
             )}
           >
-            <Crop className="h-4 w-4" />
-          </button>
-        )}
-        
-        <button
-          onClick={() => handleSend(input || inputRef.current?.value || "")}
-          onPointerDown={(e) => e.stopPropagation()}
-          disabled={isProcessing}
-          className={cn(
-            "px-3 py-2 rounded transition-colors",
-            visionMode
-              ? "bg-purple-600 text-white hover:bg-purple-700"
-              : "bg-[#00A3E1] text-white hover:bg-[#0090c8]",
-            "disabled:opacity-50 disabled:cursor-not-allowed"
-          )}
-        >
-          {isProcessing ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Send className="h-4 w-4" />
-          )}
-        </button>
-      </div>
-      
-      {/* Annotation indicator */}
-      {annotatedScreenshot && visionMode && (
-        <div className="flex items-center justify-between text-xs text-[#00D3C8] bg-[#00D3C8]/10 px-2 py-1 rounded">
-          <span className="flex items-center gap-1">
-            <Crop className="h-3 w-3" />
-            Focus area selected - your prompt will target this region
-          </span>
-          <button
-            onClick={clearAnnotation}
-            className="text-[#00D3C8] hover:text-[#00b3a8] p-0.5"
-            title="Clear annotation"
-          >
-            <X className="h-3 w-3" />
+            {isProcessing ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Send className="h-4 w-4" />
+            )}
           </button>
         </div>
-      )}
 
-      {/* Processing Indicator */}
-      {isProcessing && (
-        <div className={cn(
-          "flex items-center gap-2 text-xs",
-          visionMode ? "text-purple-600" : "text-gray-500"
-        )}>
-          <Loader2 className="h-3 w-3 animate-spin" />
-          <span>
-            {visionMode
-              ? "AI is analyzing the page screenshot and generating changes..."
-              : "AI is analyzing and generating changes..."}
-          </span>
-        </div>
-      )}
+        {/* Quick tip */}
+        <p className="text-[9px] text-foreground-muted text-center mt-2">
+          Press Enter to send • Keep chatting to refine changes
+        </p>
+      </div>
 
-      {/* Screenshot Annotator Overlay - draws on live app */}
+      {/* Screenshot Annotator Overlay */}
       {isAnnotating && (
         <ScreenshotAnnotator
           onConfirm={handleAnnotationConfirm}