import React, { useState, useEffect, useRef } from 'react';
import useFlowStore from '../store/flowStore';
import type { NodeData, Trace, Message, MergedTrace, MergeStrategy } from '../store/flowStore';
import ReactMarkdown from 'react-markdown';
import { Play, Settings, Info, Save, ChevronLeft, ChevronRight, Maximize2, Edit3, X, Check, FileText, MessageCircle, Send, GripVertical, GitMerge, Trash2, AlertCircle, Loader2 } from 'lucide-react';

interface SidebarProps {
  isOpen: boolean;
  onToggle: () => void;
  onInteract?: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
  const { 
    nodes, edges, selectedNodeId, updateNodeData, getActiveContext, addNode, setSelectedNode, 
    isTraceComplete, createQuickChatNode, theme,
    createMergedTrace, updateMergedTrace, deleteMergedTrace, computeMergedMessages
  } = useFlowStore();
  const isDark = theme === 'dark';
  const [activeTab, setActiveTab] = useState<'interact' | 'settings' | 'debug'>('interact');
  const [streamBuffer, setStreamBuffer] = useState('');
  const [streamingNodeId, setStreamingNodeId] = useState<string | null>(null); // Track which node is streaming
  
  // Response Modal & Edit states
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [editedResponse, setEditedResponse] = useState('');
  
  // Summary states
  const [showSummaryModal, setShowSummaryModal] = useState(false);
  const [summaryModel, setSummaryModel] = useState('gpt-5-nano');
  const [isSummarizing, setIsSummarizing] = useState(false);
  
  // Quick Chat states
  const [quickChatOpen, setQuickChatOpen] = useState(false);
  const [quickChatTrace, setQuickChatTrace] = useState<Trace | null>(null);
  const [quickChatMessages, setQuickChatMessages] = useState<Message[]>([]);
  const [quickChatInput, setQuickChatInput] = useState('');
  const [quickChatModel, setQuickChatModel] = useState('gpt-5.1');
  const [quickChatLoading, setQuickChatLoading] = useState(false);
  const [quickChatTemp, setQuickChatTemp] = useState(0.7);
  const [quickChatEffort, setQuickChatEffort] = useState<'low' | 'medium' | 'high'>('medium');
  const [quickChatNeedsDuplicate, setQuickChatNeedsDuplicate] = useState(false);
  const [quickChatWebSearch, setQuickChatWebSearch] = useState(true);
  const quickChatEndRef = useRef<HTMLDivElement>(null);
  const quickChatInputRef = useRef<HTMLTextAreaElement>(null);
  
  // Merge Trace states
  const [showMergeModal, setShowMergeModal] = useState(false);
  const [mergeSelectedIds, setMergeSelectedIds] = useState<string[]>([]);
  const [mergeStrategy, setMergeStrategy] = useState<MergeStrategy>('query_time');
  const [mergeDraggedId, setMergeDraggedId] = useState<string | null>(null);
  const [mergeOrder, setMergeOrder] = useState<string[]>([]);
  const [showMergePreview, setShowMergePreview] = useState(false);
  const [isSummarizingMerge, setIsSummarizingMerge] = useState(false);

  const selectedNode = nodes.find((n) => n.id === selectedNodeId);

  // Reset stream buffer and modal states when node changes
  useEffect(() => {
    setStreamBuffer('');
    setIsModalOpen(false);
    setIsEditing(false);
    setShowMergeModal(false);
    setMergeSelectedIds([]);
    setShowMergePreview(false);
  }, [selectedNodeId]);
  
  // Default select first trace when node changes and no trace is selected
  useEffect(() => {
    if (selectedNode && 
        selectedNode.data.traces && 
        selectedNode.data.traces.length > 0 &&
        (!selectedNode.data.activeTraceIds || selectedNode.data.activeTraceIds.length === 0)) {
      updateNodeData(selectedNode.id, {
        activeTraceIds: [selectedNode.data.traces[0].id]
      });
    }
  }, [selectedNodeId, selectedNode?.data.traces?.length]);
  
  // Sync editedResponse when entering edit mode
  useEffect(() => {
    if (isEditing && selectedNode) {
      setEditedResponse(selectedNode.data.response || '');
    }
  }, [isEditing, selectedNode?.data.response]);

  // Scroll to bottom when quick chat messages change
  useEffect(() => {
    if (quickChatEndRef.current) {
      quickChatEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [quickChatMessages]);

  if (!isOpen) {
    return (
      <div className={`border-l h-screen flex flex-col items-center py-4 w-12 z-10 transition-all duration-300 ${
        isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'
      }`}>
        <button 
          onClick={onToggle}
          className={`p-2 rounded mb-4 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
          title="Expand"
        >
          <ChevronLeft size={20} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
        </button>
        {selectedNode && (
           <div className={`writing-vertical text-xs font-bold uppercase tracking-widest mt-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} style={{ writingMode: 'vertical-rl' }}>
             {selectedNode.data.label}
           </div>
        )}
      </div>
    );
  }

  if (!selectedNode) {
    return (
      <div className={`w-96 border-l h-screen flex flex-col shadow-xl z-10 transition-all duration-300 ${
        isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'
      }`}>
        <div className={`p-3 border-b flex justify-between items-center ${
          isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-gray-50'
        }`}>
           <span className={`text-sm font-medium ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Details</span>
           <button onClick={onToggle} className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}>
             <ChevronRight size={16} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
           </button>
        </div>
        <div className={`flex-1 p-4 text-center flex flex-col justify-center ${
          isDark ? 'bg-gray-900 text-gray-400' : 'bg-gray-50 text-gray-500'
        }`}>
        <p>Select a node to edit</p>
        </div>
      </div>
    );
  }

  const handleRun = async () => {
    if (!selectedNode) return;
    
    // Check if upstream is complete before running
    const tracesCheck = checkActiveTracesComplete();
    if (!tracesCheck.complete) {
      console.warn('Cannot run: upstream context is incomplete');
      return;
    }
    
    // Capture the node ID at the start of the request
    const runningNodeId = selectedNode.id;
    const runningPrompt = selectedNode.data.userPrompt;
    
    // Record query sent timestamp
    const querySentAt = Date.now();
    updateNodeData(runningNodeId, { status: 'loading', response: '', querySentAt });
    setStreamBuffer('');
    setStreamingNodeId(runningNodeId);

    // Use getActiveContext which respects the user's selected traces
    const context = getActiveContext(runningNodeId);
    
    try {
      const response = await fetch('http://localhost:8000/api/run_node_stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          node_id: runningNodeId,
          incoming_contexts: [{ messages: context }],
          user_prompt: runningPrompt,
          merge_strategy: selectedNode.data.mergeStrategy || 'smart',
          config: {
            provider: selectedNode.data.model.includes('gpt') || selectedNode.data.model === 'o3' ? 'openai' : 'google',
            model_name: selectedNode.data.model,
            temperature: selectedNode.data.temperature,
            system_prompt: selectedNode.data.systemPrompt,
            api_key: selectedNode.data.apiKey,
            enable_google_search: selectedNode.data.enableGoogleSearch !== false,
            reasoning_effort: selectedNode.data.reasoningEffort || 'medium',
          }
        })
      });

      if (!response.body) return;
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let fullResponse = '';

      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value);
        fullResponse += chunk;
        // Only update stream buffer, the display logic will check streamingNodeId
        setStreamBuffer(prev => prev + chunk);
      }
      
      // Update final state using captured nodeId
      const newUserMsg = { 
        id: `msg_${Date.now()}_u`,
        role: 'user', 
        content: runningPrompt 
      };
      const newAssistantMsg = { 
        id: `msg_${Date.now()}_a`,
        role: 'assistant', 
        content: fullResponse 
      };
      
      const responseReceivedAt = Date.now();
      
      updateNodeData(runningNodeId, { 
        status: 'success', 
        response: fullResponse,
        responseReceivedAt,
        messages: [...context, newUserMsg, newAssistantMsg] as any 
      });
      
      // Auto-generate title
      generateTitle(runningNodeId, runningPrompt, fullResponse);

    } catch (error) {
      console.error(error);
      updateNodeData(runningNodeId, { status: 'error' });
    } finally {
      setStreamingNodeId(prev => prev === runningNodeId ? null : prev);
    }
  };

  const handleChange = (field: keyof NodeData, value: any) => {
    updateNodeData(selectedNode.id, { [field]: value });
  };
  
  const handleSaveEdit = () => {
    if (!selectedNode) return;
    updateNodeData(selectedNode.id, { response: editedResponse });
    setIsEditing(false);
  };
  
  const handleCancelEdit = () => {
    setIsEditing(false);
    setEditedResponse(selectedNode?.data.response || '');
  };
  
  // Summarize response
  const handleSummarize = async () => {
    if (!selectedNode?.data.response) return;
    
    setIsSummarizing(true);
    setShowSummaryModal(false);
    
    try {
      const res = await fetch('http://localhost:8000/api/summarize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          content: selectedNode.data.response,
          model: summaryModel
        })
      });
      
      if (res.ok) {
        const data = await res.json();
        if (data.summary) {
          // Replace response with summary
          updateNodeData(selectedNode.id, { response: data.summary });
        }
      }
    } catch (error) {
      console.error('Summarization failed:', error);
    } finally {
      setIsSummarizing(false);
    }
  };
  
  // Auto-generate title using gpt-5-nano
  const generateTitle = async (nodeId: string, userPrompt: string, response: string) => {
    try {
      const res = await fetch('http://localhost:8000/api/generate_title', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_prompt: userPrompt, response })
      });
      
      if (res.ok) {
        const data = await res.json();
        if (data.title) {
          updateNodeData(nodeId, { label: data.title });
        }
      }
    } catch (error) {
      console.error('Failed to generate title:', error);
      // Silently fail - keep the original title
    }
  };

  // Open merge modal
  const openMergeModal = () => {
    if (!selectedNode?.data.traces) return;
    const traceIds = selectedNode.data.traces.map((t: Trace) => t.id);
    setMergeOrder(traceIds);
    setMergeSelectedIds([]);
    setShowMergePreview(false);
    setShowMergeModal(true);
  };

  // Drag-and-drop handlers for merge modal
  const handleMergeDragStart = (e: React.DragEvent, traceId: string) => {
    setMergeDraggedId(traceId);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleMergeDragOver = (e: React.DragEvent, overTraceId: string) => {
    e.preventDefault();
    if (!mergeDraggedId || mergeDraggedId === overTraceId) return;
    
    const newOrder = [...mergeOrder];
    const draggedIndex = newOrder.indexOf(mergeDraggedId);
    const overIndex = newOrder.indexOf(overTraceId);
    
    if (draggedIndex !== -1 && overIndex !== -1) {
      newOrder.splice(draggedIndex, 1);
      newOrder.splice(overIndex, 0, mergeDraggedId);
      setMergeOrder(newOrder);
    }
  };

  const handleMergeDragEnd = () => {
    setMergeDraggedId(null);
  };

  // Toggle trace selection in merge modal
  const toggleMergeSelection = (traceId: string) => {
    setMergeSelectedIds(prev => {
      if (prev.includes(traceId)) {
        return prev.filter(id => id !== traceId);
      } else {
        return [...prev, traceId];
      }
    });
  };

  // Create merged trace
  const handleCreateMergedTrace = async () => {
    if (!selectedNode || mergeSelectedIds.length < 2) return;
    
    // Get the ordered trace IDs based on mergeOrder
    const orderedSelectedIds = mergeOrder.filter(id => mergeSelectedIds.includes(id));
    
    if (mergeStrategy === 'summary') {
      setIsSummarizingMerge(true);
      try {
        const messages = computeMergedMessages(selectedNode.id, orderedSelectedIds, 'trace_order');
        const content = messages.map(m => `${m.role}: ${m.content}`).join('\n\n');
        
        const res = await fetch('http://localhost:8000/api/summarize', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            content,
            model_name: 'gpt-5-nano',
            api_key: selectedNode.data.apiKey
          })
        });
        
        if (res.ok) {
          const data = await res.json();
          const mergedId = createMergedTrace(selectedNode.id, orderedSelectedIds, 'summary');
          if (mergedId && data.summary) {
            updateMergedTrace(selectedNode.id, mergedId, { summarizedContent: data.summary });
          }
        }
      } catch (error) {
        console.error('Failed to summarize for merge:', error);
      } finally {
        setIsSummarizingMerge(false);
      }
    } else {
      createMergedTrace(selectedNode.id, orderedSelectedIds, mergeStrategy);
    }
    
    // Close modal and reset
    setShowMergeModal(false);
    setMergeSelectedIds([]);
    setShowMergePreview(false);
  };

  // Get preview of merged messages
  const getMergePreview = () => {
    if (!selectedNode || mergeSelectedIds.length < 2) return [];
    const orderedSelectedIds = mergeOrder.filter(id => mergeSelectedIds.includes(id));
    return computeMergedMessages(selectedNode.id, orderedSelectedIds, mergeStrategy);
  };

  // Check if a trace has downstream nodes from the current selected node
  const traceHasDownstream = (trace: Trace): boolean => {
    if (!selectedNode) return false;
    
    // Find edges going out from selectedNode that are part of this trace
    const outgoingEdge = edges.find(e => 
      e.source === selectedNode.id && 
      e.sourceHandle?.startsWith('trace-')
    );
    
    return !!outgoingEdge;
  };
  
  // Quick Chat functions
  const openQuickChat = (trace: Trace | null, isNewTrace: boolean = false) => {
    if (!selectedNode) return;
    onInteract?.(); // Close context menu when opening quick chat
    
    // Check if current node has a "sent" query (has response) or just unsent draft
    const hasResponse = !!selectedNode.data.response;
    const hasDraftPrompt = !!selectedNode.data.userPrompt && !hasResponse;
    
    if (isNewTrace || !trace) {
      // Start a new trace from current node
      const initialMessages: Message[] = [];
      // Only include user prompt as message if it was actually sent (has response)
      if (selectedNode.data.userPrompt && hasResponse) {
        initialMessages.push({ id: `${selectedNode.id}-u`, role: 'user', content: selectedNode.data.userPrompt });
      }
      if (selectedNode.data.response) {
        initialMessages.push({ id: `${selectedNode.id}-a`, role: 'assistant', content: selectedNode.data.response });
      }
      
      setQuickChatTrace({
        id: `new-trace-${selectedNode.id}`,
        sourceNodeId: selectedNode.id,
        color: '#888',
        messages: initialMessages
      });
      setQuickChatMessages(initialMessages);
      setQuickChatNeedsDuplicate(false);
    } else {
      // Use existing trace context
      const hasDownstream = traceHasDownstream(trace);
      setQuickChatNeedsDuplicate(hasDownstream);
      
      // Build full message history
      const fullMessages: Message[] = [...trace.messages];
      // Only include current node's content if it was sent
      if (selectedNode.data.userPrompt && hasResponse) {
        fullMessages.push({ id: `${selectedNode.id}-u`, role: 'user', content: selectedNode.data.userPrompt });
      }
      if (selectedNode.data.response) {
        fullMessages.push({ id: `${selectedNode.id}-a`, role: 'assistant', content: selectedNode.data.response });
      }
      
      setQuickChatTrace({
        ...trace,
        sourceNodeId: selectedNode.id,
        messages: fullMessages
      });
      setQuickChatMessages(fullMessages);
    }
    
    setQuickChatOpen(true);
    // If there's an unsent draft, put it in the input box
    setQuickChatInput(hasDraftPrompt ? selectedNode.data.userPrompt : '');
  };

  const closeQuickChat = () => {
    setQuickChatOpen(false);
    setQuickChatTrace(null);
    setQuickChatMessages([]);
  };
  
  // Open Quick Chat for a merged trace
  const openMergedQuickChat = (merged: MergedTrace) => {
    if (!selectedNode) return;
    onInteract?.();
    
    // Check if current node has a "sent" query (has response) or just unsent draft
    const hasResponse = !!selectedNode.data.response;
    const hasDraftPrompt = !!selectedNode.data.userPrompt && !hasResponse;
    
    // Build messages from merged trace
    const fullMessages: Message[] = [...merged.messages];
    // Only include current node's content if it was sent
    if (selectedNode.data.userPrompt && hasResponse) {
      fullMessages.push({ id: `${selectedNode.id}-u`, role: 'user', content: selectedNode.data.userPrompt });
    }
    if (selectedNode.data.response) {
      fullMessages.push({ id: `${selectedNode.id}-a`, role: 'assistant', content: selectedNode.data.response });
    }
    
    // Create a pseudo-trace for the merged context
    setQuickChatTrace({
      id: merged.id,
      sourceNodeId: selectedNode.id,
      color: merged.colors[0] || '#888',
      messages: fullMessages
    });
    setQuickChatMessages(fullMessages);
    setQuickChatNeedsDuplicate(false); // Merged traces don't duplicate
    
    setQuickChatOpen(true);
    // If there's an unsent draft, put it in the input box
    setQuickChatInput(hasDraftPrompt ? selectedNode.data.userPrompt : '');
  };
  
  // Check if a trace is complete (all upstream nodes have Q&A)
  const canQuickChat = (trace: Trace): boolean => {
    return isTraceComplete(trace);
  };
  
  // Helper: Check if all upstream nodes have complete Q&A by traversing edges
  const checkUpstreamNodesComplete = (nodeId: string, visited: Set<string> = new Set()): boolean => {
    if (visited.has(nodeId)) return true; // Avoid cycles
    visited.add(nodeId);
    
    const node = nodes.find(n => n.id === nodeId);
    if (!node) return true;
    
    // Find all incoming edges to this node
    const incomingEdges = edges.filter(e => e.target === nodeId);
    
    for (const edge of incomingEdges) {
      const sourceNode = nodes.find(n => n.id === edge.source);
      if (!sourceNode) continue;
      
      // Check if source node is disabled - skip disabled nodes
      if (sourceNode.data.disabled) continue;
      
      // Check if source node has complete Q&A
      if (!sourceNode.data.userPrompt || !sourceNode.data.response) {
        return false; // Found an incomplete upstream node
      }
      
      // Recursively check further upstream
      if (!checkUpstreamNodesComplete(edge.source, visited)) {
        return false;
      }
    }
    
    return true;
  };

  // Check if all active traces are complete (for main Run Node button)
  const checkActiveTracesComplete = (): { complete: boolean; incompleteTraceId?: string } => {
    if (!selectedNode) return { complete: true };
    
    // FIRST: Always check if all upstream nodes (via edges) have complete Q&A
    // This has highest priority - even if no trace is selected
    if (!checkUpstreamNodesComplete(selectedNode.id)) {
      return { complete: false, incompleteTraceId: 'upstream' };
    }
    
    const activeTraceIds = selectedNode.data.activeTraceIds || [];
    if (activeTraceIds.length === 0) return { complete: true };
    
    // Check incoming traces - these represent upstream context
    const incomingTraces = selectedNode.data.traces || [];
    for (const traceId of activeTraceIds) {
      const trace = incomingTraces.find((t: Trace) => t.id === traceId);
      if (trace && !isTraceComplete(trace)) {
        return { complete: false, incompleteTraceId: traceId };
      }
    }
    
    // Check outgoing traces (for originated traces)
    // But for traces that THIS node originated (self trace, forked traces), 
    // we only need to check if there are incomplete UPSTREAM messages
    // (not the current node's own messages)
    const outgoingTraces = selectedNode.data.outgoingTraces || [];
    for (const traceId of activeTraceIds) {
      const trace = outgoingTraces.find((t: Trace) => t.id === traceId);
      if (trace) {
        // Filter out current node's own messages
        const upstreamMessages = trace.messages.filter(m => !m.id?.startsWith(`${selectedNode.id}-`));
        
        // Only check completeness if there are upstream messages
        // Empty upstream means this is a head node - that's fine
        if (upstreamMessages.length > 0) {
          let userCount = 0;
          let assistantCount = 0;
          for (const msg of upstreamMessages) {
            if (msg.role === 'user') userCount++;
            if (msg.role === 'assistant') assistantCount++;
          }
          // Incomplete if unbalanced upstream messages
          if (userCount !== assistantCount) {
            return { complete: false, incompleteTraceId: traceId };
          }
        }
        // If no upstream messages, this is a head node - always complete
      }
    }
    
    // Check merged traces (all source traces must be complete)
    const mergedTraces = selectedNode.data.mergedTraces || [];
    for (const traceId of activeTraceIds) {
      const merged = mergedTraces.find((m: MergedTrace) => m.id === traceId);
      if (merged) {
        for (const sourceId of merged.sourceTraceIds) {
          const sourceTrace = incomingTraces.find((t: Trace) => t.id === sourceId);
          if (sourceTrace && !isTraceComplete(sourceTrace)) {
            return { complete: false, incompleteTraceId: sourceId };
          }
        }
      }
    }
    
    return { complete: true };
  };
  
  const activeTracesCheck = selectedNode ? checkActiveTracesComplete() : { complete: true };

  const handleQuickChatSend = async () => {
    if (!quickChatInput.trim() || !quickChatTrace || quickChatLoading || !selectedNode) return;

    const userInput = quickChatInput;
    const userMessage: Message = {
      id: `qc_${Date.now()}_u`,
      role: 'user',
      content: userInput
    };

    // Add user message to display
    const messagesBeforeSend = [...quickChatMessages];
    setQuickChatMessages(prev => [...prev, userMessage]);
    setQuickChatInput('');
    setQuickChatLoading(true);

    // Store model at send time to avoid issues with model switching during streaming
    const modelAtSend = quickChatModel;
    const tempAtSend = quickChatTemp;
    const effortAtSend = quickChatEffort;
    const webSearchAtSend = quickChatWebSearch;

    try {
      // Determine provider
      const isOpenAI = modelAtSend.includes('gpt') || modelAtSend === 'o3';
      const reasoningModels = ['gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'o3'];
      const isReasoning = reasoningModels.includes(modelAtSend);

      // Call LLM API with current messages as context
      const response = await fetch('http://localhost:8000/api/run_node_stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          node_id: 'quick_chat_temp',
          incoming_contexts: [{ messages: messagesBeforeSend }],
          user_prompt: userInput,
          merge_strategy: 'smart',
          config: {
            provider: isOpenAI ? 'openai' : 'google',
            model_name: modelAtSend,
            temperature: isReasoning ? 1 : tempAtSend,
            enable_google_search: webSearchAtSend,
            reasoning_effort: effortAtSend,
          }
        })
      });

      if (!response.body) throw new Error('No response body');

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let fullResponse = '';

      // Stream response
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value);
        fullResponse += chunk;
        
        // Update display in real-time
        setQuickChatMessages(prev => {
          const newMsgs = [...prev];
          const lastMsg = newMsgs[newMsgs.length - 1];
          if (lastMsg?.role === 'assistant') {
            // Update existing assistant message
            return [...newMsgs.slice(0, -1), { ...lastMsg, content: fullResponse }];
          } else {
            // Add new assistant message
            return [...newMsgs, { id: `qc_${Date.now()}_a`, role: 'assistant', content: fullResponse }];
          }
        });
      }

      // Determine whether to overwrite current node or create new one
      // Use quickChatTrace.sourceNodeId as the "current" node in the chat flow
      // This allows continuous chaining: A -> B -> C
      const fromNodeId = quickChatTrace.sourceNodeId;
      const fromNode = nodes.find(n => n.id === fromNodeId);
      const fromNodeHasResponse = fromNode?.data.response && fromNode.data.response.trim() !== '';
      
      if (!fromNodeHasResponse && fromNode) {
        // Overwrite the source node (it's empty)
        updateNodeData(fromNodeId, {
          userPrompt: userInput,
          response: fullResponse,
          model: modelAtSend,
          temperature: isReasoning ? 1 : tempAtSend,
          reasoningEffort: effortAtSend,
          enableGoogleSearch: webSearchAtSend,
          status: 'success',
          querySentAt: Date.now(),
          responseReceivedAt: Date.now()
        });
        
        // Update trace to reflect current node now has content
        setQuickChatTrace(prev => prev ? {
          ...prev,
          messages: [...messagesBeforeSend, userMessage, { id: `qc_${Date.now()}_a`, role: 'assistant', content: fullResponse }]
        } : null);
        
        // Generate title
        generateTitle(fromNodeId, userInput, fullResponse);
      } else {
        // Create new node (source node has response, continue the chain)
        const newNodeId = `node_${Date.now()}`;
        const sourceNode = fromNode || selectedNode;
        const newPos = {
          x: sourceNode.position.x + 300,
          y: sourceNode.position.y
        };
        
        const newNode = {
          id: newNodeId,
          type: 'llmNode',
          position: newPos,
          data: {
            label: 'Quick Chat',
            model: modelAtSend,
            temperature: isReasoning ? 1 : tempAtSend,
            systemPrompt: '',
            userPrompt: userInput,
            mergeStrategy: 'smart' as const,
            reasoningEffort: effortAtSend,
            enableGoogleSearch: webSearchAtSend,
            traces: [],
            outgoingTraces: [],
            forkedTraces: [],
            mergedTraces: [],
            activeTraceIds: [],
            response: fullResponse,
            status: 'success' as const,
            inputs: 1,
            querySentAt: Date.now(),
            responseReceivedAt: Date.now()
          }
        };

        addNode(newNode);

        // Connect to the source node
        setTimeout(() => {
          const store = useFlowStore.getState();
          const currentEdges = store.edges;
          const sourceNodeData = store.nodes.find(n => n.id === fromNodeId);
          
          // Find the right trace handle to use
          let sourceHandle = 'new-trace';
          
          // Get the base trace ID (e.g., 'trace-A' from 'trace-A_B_C' or 'new-trace-A' or 'merged-xxx')
          const currentTraceId = quickChatTrace?.id || '';
          const isNewTrace = currentTraceId.startsWith('new-trace-');
          const isMergedTrace = currentTraceId.startsWith('merged-');
          
          if (isMergedTrace) {
            // For merged trace: find the merged trace handle on the source node
            // The trace ID may have evolved (e.g., 'merged-xxx' -> 'merged-xxx_nodeA' -> 'merged-xxx_nodeA_nodeB')
            // We need to find the version that ends with the current source node ID
            
            // First try: exact match with evolved ID (merged-xxx_sourceNodeId)
            const evolvedMergedId = `${currentTraceId}_${fromNodeId}`;
            let mergedOutgoing = sourceNodeData?.data.outgoingTraces?.find(
              t => t.id === evolvedMergedId
            );
            
            // Second try: find trace that starts with merged ID and ends with this node
            if (!mergedOutgoing) {
              mergedOutgoing = sourceNodeData?.data.outgoingTraces?.find(
                t => t.id.startsWith(currentTraceId) && t.id.endsWith(`_${fromNodeId}`)
              );
            }
            
            // Third try: find any trace that contains the merged ID
            if (!mergedOutgoing) {
              mergedOutgoing = sourceNodeData?.data.outgoingTraces?.find(
                t => t.id.startsWith(currentTraceId) || t.id === currentTraceId
              );
            }
            
            // Fourth try: find any merged trace
            if (!mergedOutgoing) {
              mergedOutgoing = sourceNodeData?.data.outgoingTraces?.find(
                t => t.id.startsWith('merged-')
              );
            }
            
            if (mergedOutgoing) {
              sourceHandle = `trace-${mergedOutgoing.id}`;
            } else {
              // Last resort: use the merged trace ID directly
              sourceHandle = `trace-${currentTraceId}`;
            }
          } else if (isNewTrace) {
            // For "Start New Trace": create a fresh independent trace from the original node
            // First, check if this is the original starting node or a continuation node
            const originalStartNodeId = currentTraceId.replace('new-trace-', '');
            const isOriginalNode = fromNodeId === originalStartNodeId;
            
            if (isOriginalNode) {
              // This is the first round - starting from original node
              const hasOutgoingEdges = currentEdges.some(e => e.source === fromNodeId);
              if (hasOutgoingEdges) {
                // Original node already has downstream - create a new fork
                sourceHandle = 'new-trace';
              } else {
                // No downstream yet - use self trace
                const selfTrace = sourceNodeData?.data.outgoingTraces?.find(
                  t => t.id === `trace-${fromNodeId}`
                );
                if (selfTrace) {
                  sourceHandle = `trace-${selfTrace.id}`;
                }
              }
            } else {
              // This is a continuation - find the evolved trace that ends at fromNodeId
              // Look for a trace that was created from the original node's self trace
              const matchingTrace = sourceNodeData?.data.outgoingTraces?.find(t => {
                // The trace should end with fromNodeId and contain the original node
                return t.id.endsWith(`_${fromNodeId}`) && t.id.includes(originalStartNodeId);
              });
              
              if (matchingTrace) {
                sourceHandle = `trace-${matchingTrace.id}`;
              } else {
                // Fallback 1: Check INCOMING traces (Connect to Continue Handle)
                // This is crucial because pass-through traces are not in outgoingTraces until connected
                const incoming = sourceNodeData?.data.traces?.find(t => 
                  t.id.includes(originalStartNodeId)
                );
                
                if (incoming) {
                  // Construct evolved ID for continue handle
                  const evolvedId = `${incoming.id}_${fromNodeId}`;
                  sourceHandle = `trace-${evolvedId}`;
                } else {
                  // Fallback 2: find any trace that ends with fromNodeId
                  const anyMatch = sourceNodeData?.data.outgoingTraces?.find(
                    t => t.id === `trace-${fromNodeId}` || t.id.endsWith(`_${fromNodeId}`)
                  );
                  if (anyMatch) {
                    sourceHandle = `trace-${anyMatch.id}`;
                  }
                }
              }
            }
          } else {
            // For existing trace: find the evolved version of the original trace
            const baseTraceId = currentTraceId.replace(/^trace-/, '');
            
            // 1. Try OUTGOING traces first (if already connected downstream)
            const matchingOutgoing = sourceNodeData?.data.outgoingTraces?.find(t => {
              const traceBase = t.id.replace(/^trace-/, '');
              return traceBase.startsWith(baseTraceId) || traceBase === baseTraceId;
            });
            
            if (matchingOutgoing) {
              sourceHandle = `trace-${matchingOutgoing.id}`;
            } else {
              // 2. Try INCOMING traces (Connect to Continue Handle)
              // If we are at Node B, and currentTraceId is "trace-A", 
              // we look for incoming "trace-A" and use its continue handle "trace-trace-A_B"
              const matchingIncoming = sourceNodeData?.data.traces?.find(t => {
                 const tId = t.id.replace(/^trace-/, '');
                 return tId === baseTraceId || baseTraceId.startsWith(tId);
              });
              
              if (matchingIncoming) {
                 // Construct the evolved ID: {traceId}_{nodeId}
                 // Handle ID format in LLMNode is `trace-${evolvedTraceId}`
                 const evolvedId = `${matchingIncoming.id}_${fromNodeId}`;
                 sourceHandle = `trace-${evolvedId}`;
              }
            }
          }
          
          // If this is the first message and we need to duplicate (has downstream),
          // onConnect will automatically handle the trace duplication
          // because the sourceHandle already has an outgoing edge
          
          store.onConnect({
            source: fromNodeId,
            sourceHandle,
            target: newNodeId,
            targetHandle: 'input-0'
          });
          
          // After first duplication, subsequent messages continue on the new trace
          // Reset the duplicate flag since we're now on the new branch
          setQuickChatNeedsDuplicate(false);
          
          // Update trace for continued chat - use newNodeId as the new source
          // Find the actual trace ID on the new node to ensure continuity
          const newNode = store.nodes.find(n => n.id === newNodeId);
          const currentId = quickChatTrace?.id || '';
          const isMerged = currentId.startsWith('merged-');
          const isCurrentNewTrace = currentId.startsWith('new-trace-');
          
          let nextTraceId = currentId;
          
          if (newNode && newNode.data.outgoingTraces) {
            // Find the trace that continues the current conversation
            // It should end with the new node ID
            
            if (isMerged) {
               const evolved = newNode.data.outgoingTraces.find(t => 
                 t.id === `${currentId}_${newNodeId}`
               );
               if (evolved) nextTraceId = evolved.id;
            } else if (isCurrentNewTrace) {
               // For new trace, we look for the trace that originated from the start node
               // and now passes through the new node
               const startNodeId = currentId.replace('new-trace-', '');
               const match = newNode.data.outgoingTraces.find(t => 
                 t.id.includes(startNodeId) && t.id.endsWith(`_${newNodeId}`)
               );
               if (match) nextTraceId = match.id;
               // If first step (A->B), might be a direct fork ID
               else {
                 const directFork = newNode.data.outgoingTraces.find(t => 
                   t.id.includes(startNodeId) && t.sourceNodeId === startNodeId
                 );
                 if (directFork) nextTraceId = directFork.id;
               }
            } else {
               // Regular trace: look for evolved version
               const baseId = currentId.replace(/^trace-/, '');
               
               // 1. Try outgoing traces
               const match = newNode.data.outgoingTraces.find(t => 
                 t.id.includes(baseId) && t.id.endsWith(`_${newNodeId}`)
               );
               if (match) {
                 nextTraceId = match.id;
               } else {
                 // 2. If not in outgoing (no downstream yet), construct evolved ID manually
                 // Check if it's an incoming trace that evolved
                 const incoming = newNode.data.traces?.find(t => t.id.includes(baseId));
                 if (incoming) {
                   nextTraceId = `${incoming.id}_${newNodeId}`;
                 }
               }
            }
          }
          
          setQuickChatTrace(prev => prev ? {
            ...prev,
            id: nextTraceId,
            sourceNodeId: newNodeId,
            messages: [...messagesBeforeSend, userMessage, { id: `qc_${Date.now()}_a`, role: 'assistant', content: fullResponse }]
          } : null);
          
          // Generate title
          generateTitle(newNodeId, userInput, fullResponse);
        }, 100);
      }

    } catch (error) {
      console.error('Quick chat error:', error);
      setQuickChatMessages(prev => [...prev, { 
        id: `qc_err_${Date.now()}`, 
        role: 'assistant', 
        content: `Error: ${error}` 
      }]);
    } finally {
      setQuickChatLoading(false);
      // Refocus the input after sending
      setTimeout(() => {
        quickChatInputRef.current?.focus();
      }, 50);
    }
  };

  return (
    <div 
      className={`w-96 border-l h-screen flex flex-col shadow-xl z-10 transition-all duration-300 ${
        isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'
      }`}
      onClick={onInteract}
    >
      {/* Header */}
      <div className={`p-4 border-b flex flex-col gap-2 ${
        isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-gray-50'
      }`}>
        <div className="flex justify-between items-center">
           <input 
             type="text" 
             value={selectedNode.data.label}
             onChange={(e) => handleChange('label', e.target.value)}
             className={`font-bold text-lg bg-transparent border-none focus:ring-0 focus:outline-none w-full ${
               isDark ? 'text-gray-200' : 'text-gray-900'
             }`}
           />
           <button onClick={onToggle} className={`p-1 rounded shrink-0 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}>
             <ChevronRight size={16} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
           </button>
        </div>
        <div className="flex items-center justify-between mt-1">
          <div className={`text-xs px-2 py-1 rounded uppercase ${
            isDark ? 'bg-blue-900 text-blue-300' : 'bg-blue-100 text-blue-700'
          }`}>
          {selectedNode.data.status}
          </div>
          <div className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
             ID: {selectedNode.id}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className={`flex border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
        <button 
          onClick={() => setActiveTab('interact')}
          className={`flex-1 p-3 text-sm flex justify-center items-center gap-2 ${activeTab === 'interact' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
        >
          <Play size={16} /> Interact
        </button>
        <button 
          onClick={() => setActiveTab('settings')}
          className={`flex-1 p-3 text-sm flex justify-center items-center gap-2 ${activeTab === 'settings' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
        >
          <Settings size={16} /> Settings
        </button>
        <button 
          onClick={() => setActiveTab('debug')}
          className={`flex-1 p-3 text-sm flex justify-center items-center gap-2 ${activeTab === 'debug' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
        >
          <Info size={16} /> Debug
        </button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {activeTab === 'interact' && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Model</label>
              <select 
                value={selectedNode.data.model} 
                onChange={(e) => {
                  const newModel = e.target.value;
                  // Auto-set temperature to 1 for reasoning models
                  const reasoningModels = [
                    'gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 
                    'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'o3'
                  ];
                  const isReasoning = reasoningModels.includes(newModel);
                  
                  if (isReasoning) {
                    handleChange('temperature', 1);
                  }
                  handleChange('model', newModel);
                }}
                className="w-full border border-gray-300 rounded-md p-2 text-sm"
              >
                <optgroup label="Gemini">
                  <option value="gemini-2.5-flash">gemini-2.5-flash</option>
                  <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite</option>
                  <option value="gemini-3-pro-preview">gemini-3-pro-preview</option>
                </optgroup>
                <optgroup label="OpenAI (Standard)">
                  <option value="gpt-4.1">gpt-4.1</option>
                  <option value="gpt-4o">gpt-4o</option>
                </optgroup>
                <optgroup label="OpenAI (Reasoning)">
                  <option value="gpt-5">gpt-5</option>
                  <option value="gpt-5-chat-latest">gpt-5-chat-latest</option>
                  <option value="gpt-5-mini">gpt-5-mini</option>
                  <option value="gpt-5-nano">gpt-5-nano</option>
                  <option value="gpt-5-pro">gpt-5-pro</option>
                  <option value="gpt-5.1">gpt-5.1</option>
                  <option value="gpt-5.1-chat-latest">gpt-5.1-chat-latest</option>
                  <option value="o3">o3</option>
                </optgroup>
              </select>
            </div>

            {/* Trace Selector - Single Select */}
            <div className={`p-2 rounded border ${isDark ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
              <div className="flex items-center justify-between mb-2">
                <label className={`block text-xs font-bold uppercase ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                  Select Context
                </label>
                {/* Create Merged Trace Button - only show if 2+ traces */}
                {selectedNode.data.traces && selectedNode.data.traces.length >= 2 && (
                  <button
                    onClick={openMergeModal}
                    className={`text-xs px-2 py-1 rounded flex items-center gap-1 ${
                      isDark 
                        ? 'bg-purple-900 hover:bg-purple-800 text-purple-300' 
                        : 'bg-purple-100 hover:bg-purple-200 text-purple-600'
                    }`}
                  >
                    <GitMerge size={12} />
                    Merge
                  </button>
                )}
              </div>
              
              {/* New Trace option */}
              <div className={`flex items-center gap-2 text-sm p-1 rounded group mb-1 border-b pb-2 ${
                isDark ? 'hover:bg-gray-800 border-gray-700' : 'hover:bg-white border-gray-200'
              }`}>
                <div className="flex items-center gap-2 flex-1">
                  <div className="w-2 h-2 rounded-full bg-gray-400"></div>
                  <span className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Start New Trace</span>
                </div>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    openQuickChat(null, true);
                  }}
                  className={`p-1 rounded transition-all ${
                    isDark ? 'hover:bg-blue-900 text-gray-500 hover:text-blue-400' : 'hover:bg-blue-100 text-gray-400 hover:text-blue-600'
                  }`}
                  title="Start New Trace Quick Chat"
                >
                  <MessageCircle size={14} />
                </button>
              </div>
              
              {/* All Available Traces - Incoming + Outgoing that this node originated */}
              {(() => {
                // 1. Incoming traces (context from upstream)
                const incomingTraces = selectedNode.data.traces || [];
                
                // 2. Outgoing traces that this node ORIGINATED (not pass-through, not merged)
                // This includes self-started traces, forked traces, and prepend traces
                const outgoingTraces = (selectedNode.data.outgoingTraces || []) as Trace[];
                const originatedTraces = outgoingTraces.filter(t => {
                  // Exclude merged traces - they have their own display section
                  if (t.id.startsWith('merged-')) return false;
                  
                  // Include if this node is the source (originated here)
                  // OR if the trace ID matches a forked/prepend trace pattern from this node
                  const isOriginated = t.sourceNodeId === selectedNode.id;
                  const isForkedHere = t.id.includes(`fork-${selectedNode.id}`);
                  const isSelfTrace = t.id === `trace-${selectedNode.id}`;
                  return isOriginated || isForkedHere || isSelfTrace;
                });
                
                // Combine and deduplicate by ID 
                // Priority: incoming traces (have full context) > originated outgoing traces
                const allTracesMap = new Map<string, Trace>();
                // Add originated outgoing traces first
                originatedTraces.forEach(t => allTracesMap.set(t.id, t));
                // Then incoming traces (will overwrite if same ID, as they have fuller context)
                incomingTraces.forEach(t => allTracesMap.set(t.id, t));
                const allTraces = Array.from(allTracesMap.values());
                
                if (allTraces.length === 0) return null;
                
                return (
                <div className="space-y-1 max-h-[150px] overflow-y-auto">
                  {allTraces.map((trace: Trace) => {
                    const isActive = selectedNode.data.activeTraceIds?.includes(trace.id);
                    const isComplete = canQuickChat(trace);
                    
                    return (
                      <div 
                        key={trace.id} 
                        onClick={() => handleChange('activeTraceIds', [trace.id])}
                        className={`flex items-start gap-2 text-sm p-1.5 rounded group cursor-pointer transition-all ${
                          isActive
                            ? isDark ? 'bg-blue-900/50 border border-blue-700' : 'bg-blue-50 border border-blue-200'
                            : isDark ? 'hover:bg-gray-800' : 'hover:bg-white'
                        }`}
                      >
                        <input 
                          type="radio" 
                          checked={isActive || false}
                          readOnly
                          className="mt-1"
                        />
                        
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: trace.color }}></div>
                            <span className={`font-mono text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>#{trace.id.slice(-4)}</span>
                            {!isComplete && (
                              <span className="text-[9px] text-orange-500">(incomplete)</span>
                            )}
                          </div>
                          <div className={`text-[10px] ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
                            {trace.messages.length} msgs
                          </div>
                        </div>
                        
                        {/* Quick Chat Button */}
                        {(() => {
                          const hasDownstream = edges.some(e => 
                            e.source === selectedNode.id && 
                            e.sourceHandle?.startsWith('trace-')
                          );
                          const buttonLabel = hasDownstream ? "Duplicate & Quick Chat" : "Quick Chat";
                          
                          return (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                openQuickChat(trace, false);
                              }}
                              disabled={!isComplete}
                              className={`opacity-0 group-hover:opacity-100 p-1 rounded transition-all ${
                                isComplete 
                                  ? hasDownstream
                                    ? isDark ? 'hover:bg-orange-900 text-gray-500 hover:text-orange-400' : 'hover:bg-orange-100 text-gray-400 hover:text-orange-600'
                                    : isDark ? 'hover:bg-blue-900 text-gray-500 hover:text-blue-400' : 'hover:bg-blue-100 text-gray-400 hover:text-blue-600'
                                  : 'text-gray-500 cursor-not-allowed'
                              }`}
                              title={isComplete ? buttonLabel : "Trace incomplete - all nodes need Q&A"}
                            >
                              <MessageCircle size={14} />
                            </button>
                          );
                        })()}
                      </div>
                    );
                  })}
                </div>
                );
              })()}
              
              {/* Merged Traces - also single selectable */}
              {selectedNode.data.mergedTraces && selectedNode.data.mergedTraces.length > 0 && (
                <div className={`mt-2 pt-2 border-t space-y-1 ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
                  <label className={`block text-[10px] font-bold uppercase mb-1 ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
                    Merged Traces
                  </label>
                  {selectedNode.data.mergedTraces.map((merged: MergedTrace) => {
                    const isActive = selectedNode.data.activeTraceIds?.includes(merged.id);
                    
                    return (
                      <div 
                        key={merged.id}
                        onClick={() => handleChange('activeTraceIds', [merged.id])}
                        className={`flex items-center gap-2 p-1.5 rounded text-xs cursor-pointer transition-all ${
                          isActive
                            ? isDark ? 'bg-purple-900/50 border border-purple-600' : 'bg-purple-50 border border-purple-300'
                            : isDark ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white border border-gray-200 hover:bg-gray-50'
                        }`}
                      >
                        <input 
                          type="radio" 
                          checked={isActive || false}
                          readOnly
                          className="shrink-0"
                        />
                        
                        {/* Alternating color indicator */}
                        <div className="flex -space-x-1 shrink-0">
                          {merged.colors.slice(0, 3).map((color, idx) => (
                            <div 
                              key={idx}
                              className="w-3 h-3 rounded-full border-2"
                              style={{ backgroundColor: color, borderColor: isDark ? '#1f2937' : '#fff' }}
                            />
                          ))}
                          {merged.colors.length > 3 && (
                            <div className={`w-3 h-3 rounded-full flex items-center justify-center text-[8px] ${
                              isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-200 text-gray-500'
                            }`}>
                              +{merged.colors.length - 3}
                            </div>
                          )}
                        </div>
                        
                        <div className="flex-1 min-w-0">
                          <div className={`font-mono truncate ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
                            Merged #{merged.id.slice(-6)}
                          </div>
                          <div className={`truncate ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
                            {merged.strategy} • {merged.messages.length} msgs
                          </div>
                        </div>
                        
                        {/* Quick Chat for Merged Trace */}
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            openMergedQuickChat(merged);
                          }}
                          className={`p-1 rounded shrink-0 ${
                            isDark ? 'hover:bg-purple-900 text-gray-500 hover:text-purple-400' : 'hover:bg-purple-100 text-gray-400 hover:text-purple-600'
                          }`}
                          title="Quick Chat with merged context"
                        >
                          <MessageCircle size={12} />
                        </button>
                        
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            deleteMergedTrace(selectedNode.id, merged.id);
                          }}
                          className={`p-1 rounded shrink-0 ${
                            isDark ? 'hover:bg-red-900 text-gray-500 hover:text-red-400' : 'hover:bg-red-50 text-gray-400 hover:text-red-600'
                          }`}
                          title="Delete merged trace"
                        >
                          <Trash2 size={12} />
                        </button>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">User Prompt</label>
              <textarea 
                value={selectedNode.data.userPrompt}
                onChange={(e) => handleChange('userPrompt', e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    if (selectedNode.data.status !== 'loading' && activeTracesCheck.complete) {
                      handleRun();
                    }
                  }
                  // Shift+Enter allows normal newline
                }}
                className="w-full border border-gray-300 rounded-md p-2 text-sm min-h-[100px]"
                placeholder="Type your message here... (Enter to run, Shift+Enter for newline)"
              />
            </div>

            {/* Warning for incomplete upstream traces */}
            {!activeTracesCheck.complete && (
              <div className={`mb-2 p-2 rounded-md text-xs flex items-center gap-2 ${
                isDark ? 'bg-yellow-900/50 text-yellow-300 border border-yellow-700' : 'bg-yellow-50 text-yellow-700 border border-yellow-200'
              }`}>
                <AlertCircle size={14} />
                <span>Upstream node is empty. Complete the context chain before running.</span>
              </div>
            )}

            <button 
              onClick={handleRun}
              disabled={selectedNode.data.status === 'loading' || !activeTracesCheck.complete}
              className={`w-full py-2 px-4 rounded-md flex items-center justify-center gap-2 transition-colors ${
                selectedNode.data.status === 'loading' || !activeTracesCheck.complete
                  ? 'bg-gray-300 text-gray-500 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400'
                  : 'bg-blue-600 text-white hover:bg-blue-700'
              }`}
            >
              {selectedNode.data.status === 'loading' ? <Loader2 className="animate-spin" size={16} /> : <Play size={16} />}
              Run Node
            </button>

            <div className="mt-6">
              <div className="flex items-center justify-between mb-2">
                <label className="block text-sm font-medium text-gray-700">Response</label>
                <div className="flex gap-1">
                  {selectedNode.data.response && (
                    <>
                      <button
                        onClick={() => setShowSummaryModal(true)}
                        disabled={isSummarizing}
                        className="p-1 hover:bg-gray-200 rounded text-gray-500 hover:text-gray-700 disabled:opacity-50"
                        title="Summarize"
                      >
                        {isSummarizing ? <Loader2 className="animate-spin" size={14} /> : <FileText size={14} />}
                      </button>
                      <button
                        onClick={() => setIsEditing(true)}
                        className="p-1 hover:bg-gray-200 rounded text-gray-500 hover:text-gray-700"
                        title="Edit Response"
                      >
                        <Edit3 size={14} />
                      </button>
                      <button
                        onClick={() => setIsModalOpen(true)}
                        className="p-1 hover:bg-gray-200 rounded text-gray-500 hover:text-gray-700"
                        title="Expand"
                      >
                        <Maximize2 size={14} />
                      </button>
                    </>
                  )}
              </div>
              </div>
              
              {isEditing ? (
                <div className="space-y-2">
                  <textarea
                    value={editedResponse}
                    onChange={(e) => setEditedResponse(e.target.value)}
                    className="w-full border border-blue-300 rounded-md p-2 text-sm min-h-[200px] font-mono focus:ring-2 focus:ring-blue-500"
                  />
                  <div className="flex gap-2 justify-end">
                    <button
                      onClick={handleCancelEdit}
                      className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded flex items-center gap-1"
                    >
                      <X size={14} /> Cancel
                    </button>
                    <button
                      onClick={handleSaveEdit}
                      className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center gap-1"
                    >
                      <Check size={14} /> Save
                    </button>
                  </div>
                </div>
              ) : (
                <div className={`p-3 rounded-md border min-h-[150px] text-sm prose prose-sm max-w-none ${
                  isDark 
                    ? 'bg-gray-900 border-gray-700 prose-invert' 
                    : 'bg-gray-50 border-gray-200'
                }`}>
                  <ReactMarkdown>{selectedNode.data.response || (streamingNodeId === selectedNode.id ? streamBuffer : '')}</ReactMarkdown>
                </div>
              )}
            </div>
          </div>
        )}

        {activeTab === 'settings' && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Merge Strategy</label>
              <select 
                value={selectedNode.data.mergeStrategy || 'smart'} 
                onChange={(e) => handleChange('mergeStrategy', e.target.value)}
                className="w-full border border-gray-300 rounded-md p-2 text-sm"
              >
                <option value="smart">Smart (Auto-merge roles)</option>
                <option value="raw">Raw (Concatenate)</option>
              </select>
              <p className="text-xs text-gray-500 mt-1">
                Smart merge combines consecutive messages from the same role to avoid API errors.
              </p>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Temperature ({selectedNode.data.temperature})
                {[
                  'gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 
                  'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'o3'
                ].includes(selectedNode.data.model) && (
                  <span className="text-xs text-orange-500 ml-2">(Locked for Reasoning Model)</span>
                )}
              </label>
              <input 
                type="range" 
                min="0" 
                max="2" 
                step="0.1"
                value={selectedNode.data.temperature}
                onChange={(e) => handleChange('temperature', parseFloat(e.target.value))}
                disabled={[
                  'gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 
                  'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'o3'
                ].includes(selectedNode.data.model)}
                className="w-full disabled:opacity-50 disabled:cursor-not-allowed"
              />
            </div>

            {/* Reasoning Effort - Only for OpenAI reasoning models (except chat-latest) */}
            {[
              'gpt-5', 'gpt-5-mini', 'gpt-5-nano', 
              'gpt-5-pro', 'gpt-5.1', 'o3'
            ].includes(selectedNode.data.model) && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Reasoning Effort
                </label>
                <select
                  value={selectedNode.data.reasoningEffort || 'medium'}
                  onChange={(e) => handleChange('reasoningEffort', e.target.value)}
                  className="w-full border border-gray-300 rounded-md p-2 text-sm"
                >
                  <option value="low">Low (Faster, less thorough)</option>
                  <option value="medium">Medium (Balanced)</option>
                  <option value="high">High (Slower, more thorough)</option>
                </select>
                <p className="text-xs text-gray-500 mt-1">
                  Controls how much reasoning the model performs before responding. Higher = more tokens used.
                </p>
              </div>
            )}
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">API Key (Optional)</label>
              <input 
                type="password"
                value={selectedNode.data.apiKey || ''}
                onChange={(e) => handleChange('apiKey', e.target.value)}
                className="w-full border border-gray-300 rounded-md p-2 text-sm"
                placeholder="Leave empty to use backend env var"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">System Prompt Override</label>
              <textarea 
                value={selectedNode.data.systemPrompt}
                onChange={(e) => handleChange('systemPrompt', e.target.value)}
                className="w-full border border-gray-300 rounded-md p-2 text-sm min-h-[100px] font-mono"
                placeholder="Global system prompt will be used if empty..."
              />
            </div>

            {(selectedNode.data.model.startsWith('gemini') || 
              selectedNode.data.model.startsWith('gpt-5') || 
              ['o3', 'o4-mini', 'gpt-4o'].includes(selectedNode.data.model)) && (
              <div className="flex items-center gap-2 mt-4">
                <input 
                  type="checkbox" 
                  id="web-search"
                  checked={selectedNode.data.enableGoogleSearch !== false} // Default to true
                  onChange={(e) => handleChange('enableGoogleSearch', e.target.checked)}
                />
                <label htmlFor="web-search" className="text-sm font-medium text-gray-700 select-none cursor-pointer">
                  Enable Web Search
                </label>
              </div>
            )}
          </div>
        )}

        {activeTab === 'debug' && (
          <div className="space-y-4">
            {/* Timestamps */}
            <div className="bg-gray-50 p-3 rounded border border-gray-200">
              <label className="block text-xs font-bold text-gray-500 mb-2 uppercase">Timestamps</label>
              <div className="grid grid-cols-2 gap-2 text-xs">
            <div>
                  <span className="text-gray-500">Query Sent:</span>
                  <div className="font-mono text-gray-700">
                    {selectedNode.data.querySentAt 
                      ? new Date(selectedNode.data.querySentAt).toLocaleString() 
                      : '-'}
                  </div>
                </div>
                <div>
                  <span className="text-gray-500">Response Received:</span>
                  <div className="font-mono text-gray-700">
                    {selectedNode.data.responseReceivedAt 
                      ? new Date(selectedNode.data.responseReceivedAt).toLocaleString() 
                      : '-'}
                  </div>
                </div>
              </div>
              {selectedNode.data.querySentAt && selectedNode.data.responseReceivedAt && (
                <div className="mt-2 text-xs text-gray-500">
                  Duration: {((selectedNode.data.responseReceivedAt - selectedNode.data.querySentAt) / 1000).toFixed(2)}s
                </div>
              )}
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Active Context (Sent to LLM)</label>
              <pre className="bg-gray-900 text-gray-100 p-2 rounded text-xs overflow-x-auto max-h-[200px]">
                {JSON.stringify(getActiveContext(selectedNode.id), null, 2)}
              </pre>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Node Traces (Incoming)</label>
              <pre className="bg-gray-900 text-gray-100 p-2 rounded text-xs overflow-x-auto max-h-[200px]">
                {JSON.stringify(selectedNode.data.traces, null, 2)}
              </pre>
            </div>
          </div>
        )}
      </div>
      
      {/* Response Modal */}
      {isModalOpen && selectedNode && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setIsModalOpen(false)}>
          <div 
            className="bg-white rounded-lg shadow-2xl w-[80vw] max-w-4xl max-h-[80vh] flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="flex items-center justify-between p-4 border-b border-gray-200">
              <h3 className="font-semibold text-lg">{selectedNode.data.label} - Response</h3>
              <div className="flex gap-2">
                {!isEditing && (
                  <button
                    onClick={() => setIsEditing(true)}
                    className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded flex items-center gap-1"
                  >
                    <Edit3 size={14} /> Edit
                  </button>
                )}
                <button
                  onClick={() => { setIsModalOpen(false); setIsEditing(false); }}
                  className="p-1 hover:bg-gray-200 rounded text-gray-500"
                >
                  <X size={18} />
                </button>
              </div>
            </div>
            
            {/* Modal Content */}
            <div className="flex-1 overflow-y-auto p-6">
              {isEditing ? (
                <textarea
                  value={editedResponse}
                  onChange={(e) => setEditedResponse(e.target.value)}
                  className="w-full h-full min-h-[400px] border border-gray-300 rounded-md p-3 text-sm font-mono focus:ring-2 focus:ring-blue-500 resize-y"
                />
              ) : (
                <div className="prose prose-sm max-w-none">
                  <ReactMarkdown>{selectedNode.data.response}</ReactMarkdown>
                </div>
              )}
            </div>
            
            {/* Modal Footer (only when editing) */}
            {isEditing && (
              <div className="flex justify-end gap-2 p-4 border-t border-gray-200">
                <button
                  onClick={handleCancelEdit}
                  className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded flex items-center gap-1"
                >
                  <X size={14} /> Cancel
                </button>
                <button
                  onClick={() => { handleSaveEdit(); setIsModalOpen(false); }}
                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center gap-1"
                >
                  <Check size={14} /> Save Changes
                </button>
              </div>
            )}
          </div>
        </div>
      )}
      
      {/* Summary Model Selection Modal */}
      {showSummaryModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowSummaryModal(false)}>
          <div 
            className="bg-white rounded-lg shadow-2xl w-80 p-4"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="font-semibold text-lg mb-4">Summarize Response</h3>
            
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">Select Model</label>
              <select
                value={summaryModel}
                onChange={(e) => setSummaryModel(e.target.value)}
                className="w-full border border-gray-300 rounded-md p-2 text-sm"
              >
                <optgroup label="Fast (Recommended)">
                  <option value="gpt-5-nano">gpt-5-nano</option>
                  <option value="gpt-5-mini">gpt-5-mini</option>
                  <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite</option>
                  <option value="gemini-2.5-flash">gemini-2.5-flash</option>
                </optgroup>
                <optgroup label="Standard">
                  <option value="gpt-4o">gpt-4o</option>
                  <option value="gpt-5">gpt-5</option>
                </optgroup>
              </select>
            </div>
            
            <div className="flex justify-end gap-2">
              <button
                onClick={() => setShowSummaryModal(false)}
                className="px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded"
              >
                Cancel
              </button>
              <button
                onClick={handleSummarize}
                className="px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center gap-1"
              >
                <FileText size={14} /> Summarize
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Merge Traces Modal */}
      {showMergeModal && selectedNode && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowMergeModal(false)}>
          <div 
            className={`rounded-xl shadow-2xl w-[500px] max-h-[80vh] flex flex-col ${
              isDark ? 'bg-gray-800' : 'bg-white'
            }`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className={`flex items-center justify-between p-4 border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
              <div className="flex items-center gap-2">
                <GitMerge size={20} className={isDark ? 'text-purple-400' : 'text-purple-600'} />
                <h3 className={`font-semibold text-lg ${isDark ? 'text-gray-100' : 'text-gray-900'}`}>
                  Create Merged Trace
                </h3>
              </div>
              <button 
                onClick={() => setShowMergeModal(false)} 
                className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}
              >
                <X size={20} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
              </button>
            </div>
            
            {/* Trace Selection - draggable */}
            <div className={`p-4 flex-1 overflow-y-auto ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
              <p className={`text-xs mb-3 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                Select traces to merge. Drag to reorder for "Trace Order" strategy.
              </p>
              
              <div className="space-y-1">
                {mergeOrder
                  .map(traceId => selectedNode.data.traces?.find((t: Trace) => t.id === traceId))
                  .filter((trace): trace is Trace => trace !== undefined)
                  .map((trace) => {
                    const isSelected = mergeSelectedIds.includes(trace.id);
                    const isDragging = mergeDraggedId === trace.id;
                    
                    return (
                      <div 
                        key={trace.id}
                        draggable
                        onDragStart={(e) => handleMergeDragStart(e, trace.id)}
                        onDragOver={(e) => handleMergeDragOver(e, trace.id)}
                        onDragEnd={handleMergeDragEnd}
                        className={`flex items-center gap-3 p-2 rounded cursor-move transition-all ${
                          isDragging ? 'opacity-50' : ''
                        } ${isSelected 
                          ? isDark ? 'bg-purple-900/50 border border-purple-600' : 'bg-purple-50 border border-purple-300'
                          : isDark ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white border border-gray-200 hover:bg-gray-50'
                        }`}
                      >
                        <GripVertical size={16} className={isDark ? 'text-gray-600' : 'text-gray-300'} />
                        
                        <input 
                          type="checkbox" 
                          checked={isSelected}
                          onChange={() => toggleMergeSelection(trace.id)}
                        />
                        
                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: trace.color }}></div>
                        
                        <div className="flex-1">
                          <span className={`font-mono text-sm ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
                            #{trace.id.slice(-6)}
                          </span>
                          <span className={`ml-2 text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
                            {trace.messages.length} msgs
                          </span>
      </div>
    </div>
  );
                  })}
              </div>
              
              {mergeSelectedIds.length < 2 && (
                <p className={`text-xs mt-3 text-center ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>
                  Select at least 2 traces to merge
                </p>
              )}
            </div>
            
            {/* Settings */}
            <div className={`p-4 border-t ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
              <label className={`block text-xs font-bold mb-2 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                Merge Strategy
              </label>
              <select
                value={mergeStrategy}
                onChange={(e) => setMergeStrategy(e.target.value as MergeStrategy)}
                className={`w-full border rounded-md p-2 text-sm mb-3 ${
                  isDark ? 'bg-gray-700 border-gray-600 text-gray-200' : 'border-gray-300'
                }`}
              >
                <option value="query_time">By Query Time</option>
                <option value="response_time">By Response Time</option>
                <option value="trace_order">By Trace Order (drag to reorder)</option>
                <option value="grouped">Grouped (each trace in full)</option>
                <option value="interleaved">Interleaved (true timeline)</option>
                <option value="summary">Summary (LLM compressed)</option>
              </select>
              
              {/* Preview */}
              {mergeSelectedIds.length >= 2 && (
                <>
                  <button
                    onClick={() => setShowMergePreview(!showMergePreview)}
                    className={`w-full text-xs py-1.5 rounded mb-2 ${
                      isDark ? 'bg-gray-700 hover:bg-gray-600 text-gray-300' : 'bg-gray-100 hover:bg-gray-200 text-gray-600'
                    }`}
                  >
                    {showMergePreview ? 'Hide Preview' : 'Show Preview'} ({getMergePreview().length} messages)
                  </button>
                  
                  {showMergePreview && (
                    <div className={`max-h-[100px] overflow-y-auto mb-3 p-2 rounded text-xs ${
                      isDark ? 'bg-gray-700' : 'bg-white border border-gray-200'
                    }`}>
                      {getMergePreview().map((msg, idx) => (
                        <div key={idx} className={`mb-1 ${msg.role === 'user' ? 'text-blue-400' : isDark ? 'text-gray-300' : 'text-gray-600'}`}>
                          <span className="font-bold">{msg.role}:</span> {msg.content.slice(0, 40)}...
                        </div>
                      ))}
                    </div>
                  )}
                </>
              )}
              
              <button
                onClick={handleCreateMergedTrace}
                disabled={mergeSelectedIds.length < 2 || isSummarizingMerge}
                className={`w-full py-2.5 rounded-md text-sm font-medium flex items-center justify-center gap-2 ${
                  mergeSelectedIds.length >= 2
                    ? isDark 
                      ? 'bg-purple-600 hover:bg-purple-500 text-white disabled:bg-purple-900' 
                      : 'bg-purple-600 hover:bg-purple-700 text-white disabled:bg-purple-300'
                    : isDark ? 'bg-gray-700 text-gray-500' : 'bg-gray-200 text-gray-400'
                }`}
              >
                {isSummarizingMerge ? (
                  <>
                    <Loader2 className="animate-spin" size={16} />
                    Summarizing...
                  </>
                ) : (
                  <>
                    <GitMerge size={16} />
                    Create Merged Trace
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Quick Chat Modal */}
      {quickChatOpen && quickChatTrace && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => { onInteract?.(); closeQuickChat(); }}>
          <div 
            className={`rounded-xl shadow-2xl w-[85vw] max-w-4xl h-[85vh] flex flex-col ${
              isDark ? 'bg-gray-800' : 'bg-white'
            }`}
            onClick={(e) => { e.stopPropagation(); onInteract?.(); }}
          >
            {/* Header */}
            <div className={`flex items-center justify-between p-4 border-b ${
              isDark ? 'border-gray-700' : 'border-gray-200'
            }`}>
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 rounded-full" style={{ backgroundColor: quickChatTrace.color }}></div>
                <h3 className={`font-semibold text-lg ${isDark ? 'text-gray-100' : 'text-gray-900'}`}>
                  {quickChatNeedsDuplicate ? 'Duplicate & Quick Chat' : 'Quick Chat'}
                </h3>
                {quickChatNeedsDuplicate && (
                  <span className={`text-xs px-2 py-0.5 rounded-full ${
                    isDark ? 'bg-orange-900/50 text-orange-300' : 'bg-orange-100 text-orange-600'
                  }`}>
                    Will create new branch
                  </span>
                )}
                <span className={`text-xs font-mono ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>#{quickChatTrace.id.slice(-8)}</span>
              </div>
              <div className="flex items-center gap-3">
                {/* Model Selector */}
                <select
                  value={quickChatModel}
                  onChange={(e) => setQuickChatModel(e.target.value)}
                  className={`border rounded-md px-3 py-1.5 text-sm ${
                    isDark ? 'bg-gray-700 border-gray-600 text-gray-200' : 'border-gray-300 text-gray-900'
                  }`}
                >
                  <optgroup label="Gemini">
                    <option value="gemini-2.5-flash">gemini-2.5-flash</option>
                    <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite</option>
                    <option value="gemini-3-pro-preview">gemini-3-pro-preview</option>
                  </optgroup>
                  <optgroup label="OpenAI (Standard)">
                    <option value="gpt-4.1">gpt-4.1</option>
                    <option value="gpt-4o">gpt-4o</option>
                  </optgroup>
                  <optgroup label="OpenAI (Reasoning)">
                    <option value="gpt-5">gpt-5</option>
                    <option value="gpt-5-chat-latest">gpt-5-chat-latest</option>
                    <option value="gpt-5-mini">gpt-5-mini</option>
                    <option value="gpt-5-nano">gpt-5-nano</option>
                    <option value="gpt-5-pro">gpt-5-pro</option>
                    <option value="gpt-5.1">gpt-5.1</option>
                    <option value="gpt-5.1-chat-latest">gpt-5.1-chat-latest</option>
                    <option value="o3">o3</option>
                  </optgroup>
                </select>
                <button onClick={closeQuickChat} className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}>
                  <X size={20} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
                </button>
              </div>
            </div>

            {/* Chat Messages */}
            <div className={`flex-1 overflow-y-auto p-4 space-y-4 ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
              {quickChatMessages.length === 0 ? (
                <div className={`text-center py-8 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
                  <MessageCircle size={48} className="mx-auto mb-2 opacity-50" />
                  <p>Start a conversation with this trace's context</p>
                </div>
              ) : (
                quickChatMessages.map((msg, idx) => (
                  <div
                    key={msg.id || idx}
                    className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                  >
                    <div className="flex items-start gap-2 max-w-[80%]">
                      {/* Source trace indicator for merged traces */}
                      {msg.sourceTraceColor && msg.role !== 'user' && (
                        <div 
                          className="w-2 h-2 rounded-full mt-3 shrink-0"
                          style={{ backgroundColor: msg.sourceTraceColor }}
                          title={`From trace: ${msg.sourceTraceId?.slice(-6) || 'unknown'}`}
                        />
                      )}
                      
                      <div
                        className={`rounded-lg px-4 py-2 ${
                          msg.role === 'user'
                            ? 'bg-blue-600 text-white'
                            : isDark 
                              ? 'bg-gray-800 border border-gray-700 text-gray-200 shadow-sm' 
                              : 'bg-white border border-gray-200 shadow-sm'
                        }`}
                        style={msg.sourceTraceColor ? { borderLeftColor: msg.sourceTraceColor, borderLeftWidth: '3px' } : undefined}
                      >
                        {/* Source trace label for user messages from merged trace */}
                        {msg.sourceTraceColor && msg.role === 'user' && (
                          <div 
                            className="text-[10px] opacity-70 mb-1 flex items-center gap-1"
                          >
                            <div 
                              className="w-2 h-2 rounded-full"
                              style={{ backgroundColor: msg.sourceTraceColor }}
                            />
                            <span>from trace #{msg.sourceTraceId?.slice(-4)}</span>
                          </div>
                        )}
                        
                        {msg.role === 'user' ? (
                          <p className="whitespace-pre-wrap">{msg.content}</p>
                        ) : (
                          <div className={`prose prose-sm max-w-none ${isDark ? 'prose-invert' : ''}`}>
                            <ReactMarkdown>{msg.content}</ReactMarkdown>
                          </div>
                        )}
                      </div>
                      
                      {/* Source trace indicator for user messages (on the right side) */}
                      {msg.sourceTraceColor && msg.role === 'user' && (
                        <div 
                          className="w-2 h-2 rounded-full mt-3 shrink-0"
                          style={{ backgroundColor: msg.sourceTraceColor }}
                          title={`From trace: ${msg.sourceTraceId?.slice(-6) || 'unknown'}`}
                        />
                      )}
                    </div>
                  </div>
                ))
              )}
              {quickChatLoading && (
                <div className="flex justify-start">
                  <div className={`rounded-lg px-4 py-3 shadow-sm ${
                    isDark ? 'bg-gray-800 border border-gray-700' : 'bg-white border border-gray-200'
                  }`}>
                    <Loader2 className="animate-spin text-blue-500" size={20} />
                  </div>
                </div>
              )}
              <div ref={quickChatEndRef} />
            </div>

            {/* Settings Row */}
            <div className={`px-4 py-2 border-t flex items-center gap-4 text-xs ${
              isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-100 bg-white'
            }`}>
              {/* Temperature (hide for reasoning models) */}
              {!['gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'o3'].includes(quickChatModel) && (
                <div className="flex items-center gap-2">
                  <span className={isDark ? 'text-gray-400' : 'text-gray-500'}>Temp:</span>
                  <input
                    type="range"
                    min="0"
                    max="2"
                    step="0.1"
                    value={quickChatTemp}
                    onChange={(e) => setQuickChatTemp(parseFloat(e.target.value))}
                    className="w-20"
                  />
                  <span className={`w-8 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>{quickChatTemp}</span>
                </div>
              )}
              
              {/* Reasoning Effort (only for reasoning models, except chat-latest) */}
              {['gpt-5', 'gpt-5-mini', 'gpt-5-nano', 'gpt-5-pro', 'gpt-5.1', 'o3'].includes(quickChatModel) && (
                <div className="flex items-center gap-2">
                  <span className={isDark ? 'text-gray-400' : 'text-gray-500'}>Effort:</span>
                  <select
                    value={quickChatEffort}
                    onChange={(e) => setQuickChatEffort(e.target.value as 'low' | 'medium' | 'high')}
                    className={`border rounded px-2 py-0.5 text-xs ${
                      isDark ? 'bg-gray-700 border-gray-600 text-gray-200' : 'border-gray-300'
                    }`}
                  >
                    <option value="low">Low</option>
                    <option value="medium">Medium</option>
                    <option value="high">High</option>
                  </select>
                </div>
              )}
              
              {/* Web Search */}
              {(quickChatModel.startsWith('gemini') || quickChatModel.startsWith('gpt-5') || ['o3', 'gpt-4o'].includes(quickChatModel)) && (
                <label className="flex items-center gap-1 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={quickChatWebSearch}
                    onChange={(e) => setQuickChatWebSearch(e.target.checked)}
                    className="form-checkbox h-3 w-3"
                  />
                  <span className={isDark ? 'text-gray-400' : 'text-gray-500'}>Web Search</span>
                </label>
              )}
            </div>

            {/* Input Area */}
            <div className={`p-4 border-t ${isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'}`}>
              <div className="flex gap-2">
                <textarea
                  ref={quickChatInputRef}
                  value={quickChatInput}
                  onChange={(e) => setQuickChatInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      // Only send if not loading
                      if (!quickChatLoading) {
                        handleQuickChatSend();
                      }
                    }
                  }}
                  placeholder={quickChatLoading 
                    ? "Waiting for response... (you can type here)" 
                    : "Type your message... (Enter to send, Shift+Enter for new line)"
                  }
                  className={`flex-1 border rounded-lg px-4 py-3 text-sm resize-y min-h-[50px] max-h-[150px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                    isDark ? 'bg-gray-700 border-gray-600 text-gray-200 placeholder-gray-400' : 'border-gray-300'
                  }`}
                  autoFocus
                />
                <button
                  onClick={handleQuickChatSend}
                  disabled={!quickChatInput.trim() || quickChatLoading}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed flex items-center gap-2"
                >
                  {quickChatLoading ? <Loader2 className="animate-spin" size={18} /> : <Send size={18} />}
                </button>
              </div>
              <p className={`text-[10px] mt-2 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
                Each message creates a new node on the canvas, automatically connected to this trace.
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Sidebar;