total-recall-brain 3.41.4 → 3.41.6

package/frontend/src/pages/ChatPage.tsx

@@ -1,1059 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { sendChat, createTask, listTasks, fetchTtsStatus, fetchTtsAudio, fetchChatHistory, fetchChatThreads, deleteChatThread, listMemory, listResearch, fetchHealth, fetchGeminiModels, shareToApi, fetchExtensionStatus, checkUpdate } from '../api'
-import type { ChatThread } from '../api'
-import type { ChatMessage, MemoryNode, ResearchItem, UpdateCheckResult } from '../types'
-import Graph3D from '../components/Graph3D'
-import { VoiceInput } from '../components/VoiceInput'
-
-
-let msgId = 0
-
-function getCurrentTimestamp(): number {
-  return Date.now()
-}
-
-function formatRelativeTime(timestamp: number): string {
-  const diffMs = getCurrentTimestamp() - timestamp
-  if (diffMs < 60000) return 'just now'
-  const diffMins = Math.floor(diffMs / 60000)
-  if (diffMins < 60) return `${diffMins}m ago`
-  const diffHours = Math.floor(diffMins / 60)
-  if (diffHours < 24) return `${diffHours}h ago`
-  const diffDays = Math.floor(diffHours / 24)
-  return `${diffDays}d ago`
-}
-
-export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrainId?: string; onBrainChange?: (id: string) => void }) {
-  const navigate = useNavigate()
-  const [messages, setMessages] = useState<ChatMessage[]>([])
-  const [input, setInput] = useState('')
-  const [loading, setLoading] = useState(false)
-  const messagesEnd = useRef<HTMLDivElement>(null)
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-  const abortControllerRef = useRef<AbortController | null>(null)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  const [voiceMode, setVoiceMode] = useState(false)
-  const [kokoroEnabled, setKokoroEnabled] = useState<boolean | null>(null)
-  const [updateInfo, setUpdateInfo] = useState<UpdateCheckResult | null>(null)
-  const [deepResearchMode, setDeepResearchMode] = useState(false)
-  const [detectedUrl, setDetectedUrl] = useState<string | null>(null)
-  const [urlToast, setUrlToast] = useState<string | null>(null)
-
-  // Extension banner state
-  const [extensionStatus, setExtensionStatus] = useState<{ available: boolean; connected: boolean } | null>(null)
-  const [extensionBannerDismissed, setExtensionBannerDismissed] = useState(
-    () => localStorage.getItem('tr-ext-banner-dismissed') === 'true'
-  )
-  const [dismissedUpdateVersion, setDismissedUpdateVersion] = useState<string | null>(
-    () => localStorage.getItem('tr-update-banner-dismissed-version')
-  )
-
-  // Threads listing & session control state
-  const [threads, setThreads] = useState<ChatThread[]>([])
-  const [activeThreadId, setActiveThreadId] = useState<string | undefined>(undefined)
-
-  // Grounding nodes & suggested discussions state
-  const [selectedGroundingNodes, setSelectedGroundingNodes] = useState<string[]>([])
-  const [allMemoryNodes, setAllMemoryNodes] = useState<MemoryNode[]>([])
-  const [researchItems, setResearchItems] = useState<ResearchItem[]>([])
-  const [showNodeSelector, setShowNodeSelector] = useState(false)
-  const [nodeSearchQuery, setNodeSearchQuery] = useState('')
-  const nodeSelectorRef = useRef<HTMLDivElement>(null)
-
-const DEFAULT_GEMINI_MODELS = [
-  { id: 'gemini-3.8-flash-high', displayName: 'Gemini 3.8 Flash (High)' },
-  { id: 'gemini-3.8-flash-medium', displayName: 'Gemini 3.8 Flash (Medium)' },
-  { id: 'gemini-3.8-flash-low', displayName: 'Gemini 3.8 Flash (Low)' },
-  { id: 'gemini-3.7-flash-high', displayName: 'Gemini 3.7 Flash (High)' },
-  { id: 'gemini-3.7-flash-medium', displayName: 'Gemini 3.7 Flash (Medium)' },
-  { id: 'gemini-3.6-flash-high', displayName: 'Gemini 3.6 Flash (High)' },
-  { id: 'gemini-3.1-pro-high', displayName: 'Gemini 3.1 Pro (High)' },
-  { id: 'gemini-3.5-flash', displayName: 'Gemini 3.5 Flash' },
-  { id: 'gemini-3.5-pro', displayName: 'Gemini 3.5 Pro' },
-]
-
-  // Model Selector state
-  const [availableModels, setAvailableModels] = useState<string[]>([])
-  const [selectedModel, setSelectedModel] = useState<string>(() => {
-    const saved = localStorage.getItem('selectedModel');
-    return (saved && saved !== 'gemini') ? saved : 'antigravity';
-  })
-  const [selectedSubModel, setSelectedSubModel] = useState<string>(() => localStorage.getItem('selectedSubModel') || 'gemini-3.8-flash-high')
-  const [geminiModels, setGeminiModels] = useState<{ id: string; displayName: string }[]>(DEFAULT_GEMINI_MODELS)
-  const [showModelDropdown, setShowModelDropdown] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const scrollToBottom = useCallback(() => {
-    messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [])
-
-  useEffect(scrollToBottom, [messages, scrollToBottom])
-
-  const refreshThreads = useCallback(() => {
-    fetchChatThreads()
-      .then(list => {
-        setThreads(list)
-      })
-      .catch(console.error)
-
-    listResearch()
-      .then(res => setResearchItems(res.items || []))
-      .catch(console.error)
-  }, [])
-
-  // Load threads list, suggestions, and health on mount
-  useEffect(() => {
-    fetchChatThreads()
-      .then(list => {
-        setThreads(list)
-        if (list.length > 0) {
-          setActiveThreadId(list[0].id)
-          // Auto-switch brain to the most recent thread's brain
-          if (list[0].brainId && onBrainChange) {
-            onBrainChange(list[0].brainId)
-          }
-        }
-      })
-      .catch(console.error)
-
-    listResearch()
-      .then(res => setResearchItems(res.items || []))
-      .catch(console.error)
-
-    fetchHealth()
-      .then(health => {
-        const agents = health.cli_agents && health.cli_agents.length > 0
-          ? health.cli_agents
-          : ['antigravity', 'grok', 'claude', 'codex'];
-        setAvailableModels(agents);
-        
-        const saved = localStorage.getItem('selectedModel');
-        if (saved && agents.includes(saved)) {
-          setSelectedModel(saved);
-        } else {
-          const defaultAgent = agents.includes('antigravity')
-            ? 'antigravity'
-            : agents.includes('grok')
-              ? 'grok'
-              : agents[0];
-          setSelectedModel(defaultAgent);
-          localStorage.setItem('selectedModel', defaultAgent);
-        }
-      })
-      .catch(() => {
-        const agents = ['antigravity', 'grok', 'claude', 'codex'];
-        setAvailableModels(agents);
-        const saved = localStorage.getItem('selectedModel');
-        if (saved && agents.includes(saved)) {
-          setSelectedModel(saved);
-        } else {
-          setSelectedModel('antigravity');
-          localStorage.setItem('selectedModel', 'antigravity');
-        }
-      })
-
-    fetchGeminiModels()
-      .then(models => {
-        const list = models && models.length > 0 ? models : DEFAULT_GEMINI_MODELS;
-        setGeminiModels(list);
-        const savedSub = localStorage.getItem('selectedSubModel');
-        const exists = list.some(m => m.id === savedSub);
-        if (savedSub && exists) {
-          setSelectedSubModel(savedSub);
-        } else {
-          setSelectedSubModel(list[0].id);
-          localStorage.setItem('selectedSubModel', list[0].id);
-        }
-      })
-      .catch(() => {
-        setGeminiModels(DEFAULT_GEMINI_MODELS);
-        const savedSub = localStorage.getItem('selectedSubModel');
-        const exists = DEFAULT_GEMINI_MODELS.some(m => m.id === savedSub);
-        if (savedSub && exists) {
-          setSelectedSubModel(savedSub);
-        } else {
-          setSelectedSubModel(DEFAULT_GEMINI_MODELS[0].id);
-          localStorage.setItem('selectedSubModel', DEFAULT_GEMINI_MODELS[0].id);
-        }
-      })
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- onBrainChange is stable from parent
-  }, [])
-
-  // Periodic update check
-  useEffect(() => {
-    let active = true
-    const check = () => {
-      checkUpdate()
-        .then(data => {
-          if (active) setUpdateInfo(data)
-        })
-        .catch(console.error)
-    }
-    check()
-    const interval = setInterval(check, 3600000)
-    return () => {
-      active = false
-      clearInterval(interval)
-    }
-  }, [])
-
-  // Reload memory nodes when active selected brain changes or background SSE triggers
-  useEffect(() => {
-    let active = true
-
-    const loadMemoryNodes = () => {
-      listMemory(activeBrainId)
-        .then(nodes => {
-          if (!active) return
-          setAllMemoryNodes(nodes)
-          // Ensure selected grounding nodes stay in sync if a node is deleted in another tab/process
-          setSelectedGroundingNodes(prev => prev.filter(slug => nodes.some(n => n.slug === slug)))
-        })
-        .catch(console.error)
-    }
-
-    // Initial load
-    loadMemoryNodes()
-
-    // Listen to Cognitive Daemon SSE for memory surface rebuilds
-    const sseUrl = "http://localhost:9111/stream"
-    const eventSource = new EventSource(sseUrl)
-
-    eventSource.onmessage = (event) => {
-      if (!active) return
-      try {
-        const logEntry = JSON.parse(event.data)
-        if (
-          logEntry.sender === 'conflict-detector' ||
-          logEntry.sender === 'memory-ingestion' ||
-          logEntry.message?.includes('Surface compilation') ||
-          logEntry.message?.includes('Brain embeddings rebuilt') ||
-          logEntry.message?.includes('Graph indices rebuilt') ||
-          logEntry.message?.includes('deleted')
-        ) {
-          loadMemoryNodes()
-        }
-      } catch {
-        // ignore parsing errors from stream
-      }
-    }
-
-    return () => {
-      active = false
-      eventSource.close()
-    }
-  }, [activeBrainId])
-
-  // Click outside listener for grounding node selector popover and model selector dropdown
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (nodeSelectorRef.current && !nodeSelectorRef.current.contains(event.target as Node)) {
-        setShowNodeSelector(false)
-      }
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setShowModelDropdown(false)
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [nodeSelectorRef, dropdownRef])
-
-  // Load chat history when activeThreadId changes
-  useEffect(() => {
-    fetchChatHistory(activeThreadId)
-      .then(history => {
-        if (history) {
-          setMessages(history as ChatMessage[])
-          msgId = Math.max(msgId, history.length + 1)
-        } else {
-          setMessages([])
-        }
-      })
-      .catch(err => {
-        console.error(err)
-        setMessages([])
-      })
-  }, [activeThreadId])
-
-
-  // Probe the Kokoro endpoint once when voice mode is turned on so we know
-  // whether to call /api/tts or fall back to the browser engine.
-  useEffect(() => {
-    if (!voiceMode || kokoroEnabled !== null) return
-    fetchTtsStatus().then(s => setKokoroEnabled(s.enabled)).catch(() => setKokoroEnabled(false))
-  }, [voiceMode, kokoroEnabled])
-
-  // Check Chrome extension availability (once on mount)
-  useEffect(() => {
-    if (!extensionBannerDismissed) {
-      fetchExtensionStatus().then(setExtensionStatus).catch(() => {})
-    }
-  }, [extensionBannerDismissed])
-
-  const speakBrowser = (text: string) => {
-    if (!('speechSynthesis' in window)) return
-    window.speechSynthesis.cancel()
-    const utterance = new SpeechSynthesisUtterance(text)
-    utterance.rate = 1.05
-    utterance.pitch = 0.95
-    window.speechSynthesis.speak(utterance)
-  }
-
-  const speak = async (text: string) => {
-    if (!voiceMode || !text.trim()) return
-    if (kokoroEnabled === false) { speakBrowser(text); return }
-    try {
-      const blob = await fetchTtsAudio(text)
-      if (!blob) {
-        // 503 → Kokoro not configured. Remember that and fall back.
-        setKokoroEnabled(false)
-        speakBrowser(text)
-        return
-      }
-      const url = URL.createObjectURL(blob)
-      if (audioRef.current) {
-        audioRef.current.pause()
-        URL.revokeObjectURL(audioRef.current.src)
-      }
-      const audio = new Audio(url)
-      audioRef.current = audio
-      audio.onended = () => URL.revokeObjectURL(url)
-      audio.play().catch(() => speakBrowser(text))
-    } catch {
-      speakBrowser(text)
-    }
-  }
-
-  const handleNewChat = () => {
-    const newId = `thread-${getCurrentTimestamp()}`
-    setActiveThreadId(newId)
-    setMessages([])
-    setInput('')
-    setSelectedGroundingNodes([])
-    if (textareaRef.current) textareaRef.current.style.height = '44px'
-  }
-
-  const handleDeleteThread = async (e: React.MouseEvent, id: string) => {
-    e.stopPropagation()
-    if (!confirm('Are you sure you want to delete this conversation thread?')) return
-    try {
-      await deleteChatThread(id)
-      if (activeThreadId === id) {
-        const remaining = threads.filter(t => t.id !== id)
-        if (remaining.length > 0) {
-          setActiveThreadId(remaining[0].id)
-        } else {
-          setActiveThreadId(undefined)
-          setMessages([])
-        }
-      }
-      refreshThreads()
-    } catch (err) {
-      console.error('Failed to delete thread:', err)
-    }
-  }
-
-
-
-  const handleSend = async () => {
-    const text = input.trim()
-    if (!text || loading) return
-
-    const sessionId = activeThreadId || `thread-${getCurrentTimestamp()}`
-    if (!activeThreadId) {
-      setActiveThreadId(sessionId)
-    }
-
-    const userMsg: ChatMessage = { id: String(++msgId), role: 'user', content: text, timestamp: getCurrentTimestamp() }
-    setMessages(prev => [...prev, userMsg])
-    setInput('')
-    setLoading(true)
-
-    abortControllerRef.current = new AbortController()
-
-    // Auto-resize textarea back
-    if (textareaRef.current) textareaRef.current.style.height = '44px'
-
-    try {
-      if (deepResearchMode) {
-        setMessages(prev => [...prev, { id: String(++msgId), role: 'assistant', content: '🕵️ **Deep Research Agents dispatched.** Gathering facts across parallel web streams...', timestamp: getCurrentTimestamp() }]);
-        
-        const { slug } = await createTask('proactive-research', text, text);
-        
-        // Poll for task completion
-        let taskCompleted = false;
-        while (!taskCompleted) {
-          await new Promise(r => setTimeout(r, 2000));
-          const tasks = await listTasks();
-          const t = tasks.find(x => x.slug === slug);
-          if (t && (t.status === 'completed' || t.status === 'failed')) {
-            taskCompleted = true;
-            setMessages(prev => prev.filter(m => m.content !== '🕵️ **Deep Research Agents dispatched.** Gathering facts across parallel web streams...'));
-            setMessages(prev => [...prev, { id: String(++msgId), role: 'assistant', content: t.body || '', timestamp: getCurrentTimestamp() }]);
-            speak(t.body || '');
-          }
-        }
-        setLoading(false);
-        return;
-      }
-
-      const modelWithSubModel = ['gemini', 'antigravity', 'agy'].includes(selectedModel) && selectedSubModel
-        ? `${selectedModel}:${selectedSubModel}`
-        : selectedModel
-
-      const historyToSend = [...messages, userMsg].map(m => ({ role: m.role, content: m.content }))
-      const reply = await sendChat(historyToSend, abortControllerRef.current.signal, sessionId, selectedGroundingNodes, modelWithSubModel, activeBrainId)
-      const assistantMsg: ChatMessage = { id: String(++msgId), role: 'assistant', content: reply, timestamp: getCurrentTimestamp(), versions: [reply], currentVersionIndex: 0 }
-      setMessages(prev => [...prev, assistantMsg])
-      speak(reply)
-      refreshThreads()
-    } catch (e: unknown) {
-      if ((e as Error).name === 'AbortError') {
-        setMessages(prev => [...prev, { id: String(++msgId), role: 'assistant', content: '⛔ Generation stopped by user.', timestamp: getCurrentTimestamp(), versions: ['⛔ Generation stopped by user.'], currentVersionIndex: 0 }])
-      } else {
-        const errorMsg: ChatMessage = { id: String(++msgId), role: 'assistant', content: `⚠️ Error: ${(e as Error).message}`, timestamp: getCurrentTimestamp(), versions: [`⚠️ Error: ${(e as Error).message}`], currentVersionIndex: 0 }
-        setMessages(prev => [...prev, errorMsg])
-      }
-    } finally {
-      setLoading(false)
-      abortControllerRef.current = null
-    }
-  }
-
-  const handleRegenerate = async (msgIndex: number) => {
-    if (loading) return;
-    const historyToSend = messages.slice(0, msgIndex).map(m => ({ role: m.role, content: m.content }))
-    setLoading(true)
-    abortControllerRef.current = new AbortController()
-    try {
-      const modelWithSubModel = ['gemini', 'antigravity', 'agy'].includes(selectedModel) && selectedSubModel
-        ? `${selectedModel}:${selectedSubModel}`
-        : selectedModel
-
-      const reply = await sendChat(historyToSend, abortControllerRef.current.signal, activeThreadId, undefined, modelWithSubModel, activeBrainId)
-      setMessages(prev => {
-        const next = [...prev]
-        const target = next[msgIndex]
-        const versions = target.versions || [target.content]
-        versions.push(reply)
-        target.versions = versions
-        target.currentVersionIndex = versions.length - 1
-        target.content = reply
-        return next
-      })
-      speak(reply)
-      refreshThreads()
-    } catch (e: unknown) {
-      if ((e as Error).name !== 'AbortError') console.error(e)
-    } finally {
-      setLoading(false)
-      abortControllerRef.current = null
-    }
-  }
-
-  const handleCopy = (content: string) => {
-    navigator.clipboard.writeText(content).catch(console.error)
-  }
-
-  const handleVersionSwitch = (msgIndex: number, delta: number) => {
-    setMessages(prev => {
-      const next = [...prev]
-      const target = next[msgIndex]
-      if (!target.versions) return prev
-      const newIndex = Math.max(0, Math.min(target.versions.length - 1, (target.currentVersionIndex || 0) + delta))
-      target.currentVersionIndex = newIndex
-      target.content = target.versions[newIndex]
-      return next
-    })
-  }
-
-  const handleStop = () => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort()
-      abortControllerRef.current = null
-      setLoading(false)
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend()
-    }
-  }
-
-  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value
-    setInput(value)
-    const ta = e.target
-    ta.style.height = '44px'
-    ta.style.height = Math.min(ta.scrollHeight, 160) + 'px'
-
-    // Detect URLs
-    const urlMatch = value.match(/https?:\/\/[^\s]+/)
-    setDetectedUrl(urlMatch ? urlMatch[0] : null)
-  }
-
-  const handleUrlAction = async (action: string) => {
-    if (!detectedUrl) return
-    try {
-      await shareToApi({ url: detectedUrl, action })
-      setUrlToast(`✅ URL sent to ${action}`)
-      setDetectedUrl(null)
-      setTimeout(() => setUrlToast(null), 3000)
-    } catch (err) {
-      console.error('Share API error:', err)
-      setUrlToast('⚠️ Failed to process URL')
-      setTimeout(() => setUrlToast(null), 3000)
-    }
-  }
-
-  const filteredNodes = allMemoryNodes.filter(node => 
-    node.title.toLowerCase().includes(nodeSearchQuery.toLowerCase()) ||
-    node.slug.toLowerCase().includes(nodeSearchQuery.toLowerCase()) ||
-    (node.category && node.category.toLowerCase().includes(nodeSearchQuery.toLowerCase()))
-  )
-
-  return (
-    <div className="chat-layout">
-      {/* Threads Sidebar */}
-      <aside className="chat-threads-sidebar">
-        <div className="sidebar-header">
-          <button className="new-chat-btn" onClick={handleNewChat}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 6 }}>
-              <line x1="12" y1="5" x2="12" y2="19"></line>
-              <line x1="5" y1="12" x2="19" y2="12"></line>
-            </svg>
-            New Chat
-          </button>
-        </div>
-        <div className="thread-list">
-          {threads.map(t => (
-            <div 
-              key={t.id} 
-              className={`thread-item ${activeThreadId === t.id ? 'active' : ''}`}
-              onClick={() => {
-                setActiveThreadId(t.id)
-                // Auto-switch brain context when selecting a thread
-                if (t.brainId && onBrainChange) {
-                  onBrainChange(t.brainId)
-                }
-              }}
-            >
-              <div className="thread-info">
-                <div className="thread-title" title={t.title}>{t.title}</div>
-                <div className="thread-meta">
-                  <span>{t.turns} {t.turns === 1 ? 'turn' : 'turns'}</span>
-                  <span>•</span>
-                  <span>{formatRelativeTime(t.lastUpdated)}</span>
-                </div>
-              </div>
-              <button 
-                className="thread-delete-btn" 
-                onClick={(e) => handleDeleteThread(e, t.id)}
-                title="Delete chat thread"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="3 6 5 6 21 6"></polyline>
-                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                  <line x1="10" y1="11" x2="10" y2="17"></line>
-                  <line x1="14" y1="11" x2="14" y2="17"></line>
-                </svg>
-              </button>
-            </div>
-          ))}
-        </div>
-      </aside>
-
-      {/* Main Chat Area */}
-      <div className="chat-container" style={{ position: 'relative', overflow: 'hidden' }}>
-        {/* Decorative graph only — never intercepts clicks (was blocking model/provider UI) */}
-        <div
-          aria-hidden
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 0,
-            pointerEvents: 'none',
-            opacity: messages.length > 0 ? 0.22 : 0.55,
-            transition: 'opacity 0.3s ease',
-          }}
-        >
-          <Graph3D
-            threads={threads}
-            memoryNodes={allMemoryNodes}
-            researchItems={researchItems}
-            onOpenThread={() => {}}
-            onGroundMemoryNode={() => {}}
-            selectedGroundingNodes={selectedGroundingNodes}
-            interactive={false}
-          />
-        </div>
-        <header
-          className="chat-header animate-fade-in"
-          style={{ position: 'relative', zIndex: 40, overflow: 'visible' }}
-        >
-          <div className="chat-header-title">
-            <h2>Chat Session</h2>
-            {activeThreadId && (
-              <span className="badge badge-accent" style={{ textTransform: 'none', letterSpacing: 'normal', fontSize: '11px', padding: '2px 8px' }}>
-                {activeThreadId}
-              </span>
-            )}
-          </div>
-          <div className="chat-header-model-selector" ref={dropdownRef} style={{ position: 'relative', zIndex: 50 }}>
-            <span className="selector-label">Model / provider:</span>
-            <div className="model-selector-dropdown-wrapper" style={{ position: 'relative', zIndex: 50 }}>
-              <button 
-                type="button"
-                className={`model-selector-dropdown-btn ${showModelDropdown ? 'active' : ''}`}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setShowModelDropdown((v) => !v)
-                }}
-                title="Select CLI agent / provider"
-              >
-                <span style={{ textTransform: 'capitalize' }}>
-                  {selectedModel || 'Select Model'}
-                  {['gemini', 'antigravity', 'agy'].includes(selectedModel) && selectedSubModel
-                    ? ` · ${geminiModels.find(m => m.id === selectedSubModel)?.displayName || selectedSubModel}`
-                    : ''}
-                </span>
-                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9"></polyline>
-                </svg>
-              </button>
-              {showModelDropdown && (
-                <div
-                  className="model-selector-menu glass"
-                  style={{ zIndex: 200, pointerEvents: 'auto' }}
-                  role="listbox"
-                >
-                  {availableModels.map(modelName => (
-                    <div 
-                      key={modelName} 
-                      role="option"
-                      aria-selected={selectedModel === modelName}
-                      className={`model-selector-item ${selectedModel === modelName ? 'selected' : ''}`}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        setSelectedModel(modelName)
-                        localStorage.setItem('selectedModel', modelName)
-                        setSelectedSubModel('')
-                        localStorage.removeItem('selectedSubModel')
-                        setShowModelDropdown(false)
-                      }}
-                    >
-                      <div className="model-selector-item-info">
-                        <span className="model-selector-item-name" style={{ textTransform: 'capitalize' }}>{modelName}</span>
-                        <span className="model-selector-item-desc">
-                          {modelName === 'antigravity' && 'Google Antigravity'}
-                          {modelName === 'agy' && 'Google Antigravity'}
-                          {modelName === 'grok' && 'xAI Grok Build CLI'}
-                          {modelName === 'gemini' && 'Google Gemini CLI'}
-                          {modelName === 'claude' && 'Anthropic Claude CLI'}
-                          {modelName === 'codex' && 'Codex Coding Agent'}
-                        </span>
-                      </div>
-                      <span className="model-selector-item-badge">CLI</span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {['gemini', 'antigravity', 'agy'].includes(selectedModel) && geminiModels.length > 0 && (
-              <div className="chat-header-submodel-selector" style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 16 }}>
-                <span className="selector-label" style={{ fontSize: '12px', color: 'var(--text-tertiary)', fontWeight: 500 }}>Base:</span>
-                <select
-                  value={selectedSubModel}
-                  onChange={(e) => {
-                    setSelectedSubModel(e.target.value)
-                    localStorage.setItem('selectedSubModel', e.target.value)
-                  }}
-                  className="submodel-select"
-                  style={{
-                    background: 'rgba(255, 255, 255, 0.04)',
-                    border: '1px solid var(--border)',
-                    borderRadius: 'var(--radius-sm)',
-                    color: 'var(--text-secondary)',
-                    padding: '6px 12px',
-                    fontSize: '13px',
-                    fontWeight: 500,
-                    outline: 'none',
-                    cursor: 'pointer',
-                    transition: 'all var(--transition-fast)'
-                  }}
-                >
-                  {geminiModels.map(m => (
-                    <option key={m.id} value={m.id} style={{ background: '#12121a', color: 'var(--text-secondary)' }}>{m.displayName}</option>
-                  ))}
-                </select>
-              </div>
-            )}
-          </div>
-        </header>
-
-        {/* Update Available Banner */}
-        {updateInfo?.updateAvailable && dismissedUpdateVersion !== updateInfo.latestVersion && (
-          <div className="animate-fade-in" style={{
-            margin: '0 16px 12px',
-            padding: '12px 16px',
-            background: 'linear-gradient(135deg, rgba(63, 185, 80, 0.12), rgba(34, 197, 94, 0.12))',
-            border: '1px solid rgba(63, 185, 80, 0.3)',
-            borderRadius: 10,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-            position: 'relative',
-            zIndex: 40,
-          }}>
-            <span style={{ fontSize: 22, flexShrink: 0 }}>🚀</span>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>
-                System Update Available
-              </div>
-              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
-                Version {updateInfo.latestVersion} is available. Upgrade to load the latest features.
-              </div>
-            </div>
-            <button
-              onClick={() => navigate('/health')}
-              style={{
-                flexShrink: 0,
-                padding: '6px 14px',
-                background: '#3fb950',
-                color: '#fff',
-                border: 'none',
-                borderRadius: 6,
-                fontWeight: 600,
-                fontSize: 12,
-                cursor: 'pointer',
-                whiteSpace: 'nowrap'
-              }}
-            >
-              Go to Update
-            </button>
-            <button
-              onClick={() => {
-                if (updateInfo?.latestVersion) {
-                  localStorage.setItem('tr-update-banner-dismissed-version', updateInfo.latestVersion)
-                  setDismissedUpdateVersion(updateInfo.latestVersion)
-                }
-              }}
-              title="Dismiss banner"
-              aria-label="Dismiss update banner"
-              style={{
-                background: 'transparent',
-                border: 'none',
-                color: 'var(--text-muted)',
-                fontSize: 16,
-                cursor: 'pointer',
-                padding: '4px 6px',
-                lineHeight: 1,
-              }}
-            >
-              ✕
-            </button>
-          </div>
-        )}
-
-        {/* Chrome Extension Banner — shows when available but not connected */}
-        {extensionStatus?.available && !extensionStatus.connected && !extensionBannerDismissed && (
-          <div style={{
-            margin: '0 16px 0',
-            padding: '12px 16px',
-            background: 'linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(99, 179, 237, 0.12))',
-            border: '1px solid rgba(108, 92, 231, 0.3)',
-            borderRadius: 10,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-            animation: 'fadeIn 0.3s ease',
-            position: 'relative',
-            zIndex: 40,
-          }}>
-            <span style={{ fontSize: 22, flexShrink: 0 }}>🧩</span>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>
-                Chrome Extension Available
-              </div>
-              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
-                Browse with your brain — contextual memory, quick capture, and research from any page
-              </div>
-            </div>
-            <a
-              href="/api/extension/download"
-              download
-              style={{
-                flexShrink: 0,
-                padding: '6px 14px',
-                background: 'linear-gradient(135deg, #3b82f6, #93c5fd)',
-                color: '#fff',
-                borderRadius: 6,
-                fontWeight: 500,
-                fontSize: 12,
-                textDecoration: 'none',
-                whiteSpace: 'nowrap'
-              }}
-            >
-              ⬇ Download
-            </a>
-            <button
-              onClick={() => {
-                setExtensionBannerDismissed(true)
-                localStorage.setItem('tr-ext-banner-dismissed', 'true')
-              }}
-              style={{
-                flexShrink: 0,
-                background: 'none',
-                border: 'none',
-                color: 'var(--text-tertiary)',
-                cursor: 'pointer',
-                fontSize: 16,
-                padding: '0 2px',
-                lineHeight: 1
-              }}
-              title="Dismiss"
-            >✕</button>
-          </div>
-        )}
-
-        <div className="chat-messages" style={{ position: 'relative', zIndex: 1, pointerEvents: 'auto' }}>
-          <div style={{
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '16px',
-            width: '100%',
-            maxWidth: 800,
-            margin: '0 auto',
-            pointerEvents: 'auto'
-          }}>
-            {messages.map((m, index) => (
-              <div key={m.id} className={`message message-${m.role}`} style={{
-                backdropFilter: 'blur(8px)',
-                WebkitBackdropFilter: 'blur(8px)',
-                background: m.role === 'user' ? 'rgba(108, 92, 231, 0.75)' : 'rgba(18, 18, 26, 0.75)',
-                border: '1px solid rgba(255, 255, 255, 0.08)'
-              }}>
-              <div style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{m.content}</div>
-              {m.role === 'assistant' && (
-                <div style={{ display: 'flex', gap: 12, marginTop: 12, fontSize: 13, color: 'var(--text-tertiary)', alignItems: 'center', userSelect: 'none' }}>
-                  {m.versions && m.versions.length > 1 && (
-                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginRight: 4 }}>
-                      <button 
-                        onClick={() => handleVersionSwitch(index, -1)} 
-                        disabled={(m.currentVersionIndex || 0) === 0} 
-                        style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', padding: 2, opacity: (m.currentVersionIndex || 0) === 0 ? 0.3 : 1 }}
-                      >◄</button>
-                      <span>{(m.currentVersionIndex || 0) + 1} / {m.versions.length}</span>
-                      <button 
-                        onClick={() => handleVersionSwitch(index, 1)} 
-                        disabled={(m.currentVersionIndex || 0) === m.versions.length - 1} 
-                        style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', padding: 2, opacity: (m.currentVersionIndex || 0) === m.versions.length - 1 ? 0.3 : 1 }}
-                      >►</button>
-                    </div>
-                  )}
-                  <button onClick={() => handleCopy(m.content)} title="Copy to clipboard" style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-                  </button>
-                  <button onClick={() => speak(m.content)} title="Read Aloud" style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
-                  </button>
-                  <button onClick={() => handleRegenerate(index)} disabled={loading} title="Regenerate Response" style={{ background: 'none', border: 'none', color: 'inherit', cursor: loading ? 'default' : 'pointer', display: 'flex', alignItems: 'center', gap: 4, opacity: loading ? 0.3 : 1 }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
-                  </button>
-                </div>
-              )}
-            </div>
-          ))}
-          {loading && (
-            <div className="message message-assistant" style={{
-              backdropFilter: 'blur(8px)',
-              WebkitBackdropFilter: 'blur(8px)',
-              background: 'rgba(18, 18, 26, 0.75)',
-              border: '1px solid rgba(255, 255, 255, 0.08)'
-            }}>
-              <span className="skeleton" style={{ display: 'inline-block', width: 180, height: 16 }} />
-            </div>
-          )}
-          <div ref={messagesEnd} />
-          </div>
-        </div>
-        <div className="chat-input-bar" style={{ position: 'relative', zIndex: 30, pointerEvents: 'auto' }}>
-          {selectedGroundingNodes.length > 0 && (
-            <div className="grounding-pills">
-              {selectedGroundingNodes.map(slug => {
-                const node = allMemoryNodes.find(n => n.slug === slug);
-                return (
-                  <div key={slug} className="grounding-pill animate-fade-in">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
-                      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-                    </svg>
-                    <span className="grounding-pill-title">{node?.title || slug}</span>
-                    <button className="grounding-pill-remove" onClick={() => setSelectedGroundingNodes(prev => prev.filter(s => s !== slug))} title="Remove grounding context">×</button>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-          <div className="chat-input-wrapper">
-
-            <button 
-              className={`btn btn-ghost ${deepResearchMode ? 'active' : ''}`} 
-              style={{ width: 44, height: 44, padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', color: deepResearchMode ? 'var(--accent)' : 'var(--text-tertiary)', borderColor: deepResearchMode ? 'var(--accent)' : 'var(--border)' }}
-              onClick={() => setDeepResearchMode(!deepResearchMode)}
-              title={deepResearchMode ? "Deep Research On" : "Deep Research Off"}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>
-                <path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
-              </svg>
-            </button>
-
-            <div style={{ position: 'relative', display: 'flex' }} ref={nodeSelectorRef}>
-              <button 
-                className={`btn btn-ghost ${selectedGroundingNodes.length > 0 ? 'active' : ''}`} 
-                style={{ width: 44, height: 44, padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', color: selectedGroundingNodes.length > 0 ? 'var(--accent)' : 'var(--text-tertiary)', borderColor: selectedGroundingNodes.length > 0 ? 'var(--accent)' : 'var(--border)' }}
-                onClick={() => setShowNodeSelector(!showNodeSelector)}
-                title="Ground with brain nodes"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>
-                  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
-                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-                </svg>
-                {selectedGroundingNodes.length > 0 && (
-                  <span className="grounding-count-badge">{selectedGroundingNodes.length}</span>
-                )}
-              </button>
-
-              {showNodeSelector && (
-                <div className="node-selector-popover glass">
-                  <div className="node-selector-header">
-                    <h4>Ground with Brain Nodes</h4>
-                    <input 
-                      type="text" 
-                      placeholder="Search nodes..." 
-                      value={nodeSearchQuery}
-                      onChange={e => setNodeSearchQuery(e.target.value)}
-                      className="node-search-input"
-                      autoFocus
-                    />
-                  </div>
-                  <div className="node-selector-list">
-                    {filteredNodes.length === 0 ? (
-                      <div className="node-selector-empty">No nodes found</div>
-                    ) : (
-                      filteredNodes.map(node => {
-                        const isSelected = selectedGroundingNodes.includes(node.slug);
-                        return (
-                          <div 
-                            key={node.slug} 
-                            className={`node-selector-item ${isSelected ? 'selected' : ''}`}
-                            onClick={() => {
-                              if (isSelected) {
-                                setSelectedGroundingNodes(prev => prev.filter(s => s !== node.slug));
-                              } else {
-                                setSelectedGroundingNodes(prev => [...prev, node.slug]);
-                              }
-                            }}
-                          >
-                            <span className="node-selector-item-checkbox">
-                              {isSelected ? '✓' : ''}
-                            </span>
-                            <div className="node-selector-item-info">
-                              <span className="node-selector-item-title">{node.title}</span>
-                              <span className="node-selector-item-meta">{node.category} • {node.status || 'active'}</span>
-                            </div>
-                          </div>
-                        );
-                      })
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <VoiceInput 
-              onTranscript={(text) => {
-                setInput(prev => prev + (prev.endsWith(' ') || prev === '' ? '' : ' ') + text);
-                setTimeout(() => {
-                  if (textareaRef.current) {
-                    textareaRef.current.focus();
-                    // trigger auto-resize
-                    const evt = new Event('input', { bubbles: true });
-                    textareaRef.current.dispatchEvent(evt);
-                  }
-                }, 10);
-              }}
-            />
-            <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
-              <textarea
-                ref={textareaRef}
-                id="chat-input"
-                value={input}
-                onChange={handleInput}
-                onKeyDown={handleKeyDown}
-                placeholder="Message your brain…"
-                rows={1}
-                disabled={loading}
-                style={{ paddingRight: 44 }}
-              />
-              <button 
-                className={`btn btn-ghost ${voiceMode ? 'active' : ''}`} 
-                style={{ position: 'absolute', right: 4, bottom: 4, width: 36, height: 36, padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', color: voiceMode ? '#ef4444' : 'var(--text-tertiary)', border: 'none', background: 'transparent' }}
-                onClick={() => {
-                  setVoiceMode(!voiceMode)
-                  if (voiceMode && 'speechSynthesis' in window) window.speechSynthesis.cancel()
-                }}
-                title={voiceMode ? "Voice Mode On" : "Voice Mode Off"}
-              >
-                {voiceMode ? (
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>
-                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/><line x1="8" x2="16" y1="22" y2="22"/>
-                  </svg>
-                ) : (
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>
-                    <line x1="1" x2="23" y1="1" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V5a3 3 0 0 0-5.94-.88"/><path d="M19 10v2a7 7 0 0 1-1.39 4.2M5 10v2a7 7 0 0 0 1.93 4.88"/><line x1="12" x2="12" y1="19" y2="22"/><line x1="8" x2="16" y1="22" y2="22"/>
-                  </svg>
-                )}
-              </button>
-            </div>
-            {loading ? (
-              <button className="chat-send-btn" onClick={handleStop} id="chat-stop" style={{ background: 'var(--error)', color: '#fff' }} title="Stop Generation">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style={{ width: 20, height: 20 }}>
-                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"/>
-                </svg>
-              </button>
-            ) : (
-              <button className="chat-send-btn" onClick={handleSend} disabled={!input.trim()} id="chat-send" title="Send Message">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
-                </svg>
-              </button>
-            )}
-          </div>
-          {detectedUrl && (
-            <div style={{ display: 'flex', gap: '8px', padding: '8px 12px', background: 'var(--bg-secondary, #1e1e2e)', borderRadius: '8px', alignItems: 'center', fontSize: '0.85rem', marginTop: 4 }}>
-              <span style={{ color: 'var(--text-secondary)' }}>🔗 URL detected</span>
-              <button className="btn btn-sm" onClick={() => handleUrlAction('research')}>🔬 Research</button>
-              <button className="btn btn-sm" onClick={() => handleUrlAction('remember')}>📌 Remember</button>
-            </div>
-          )}
-          {urlToast && (
-            <div style={{ padding: '6px 12px', background: 'rgba(46, 204, 113, 0.1)', border: '1px solid rgba(46, 204, 113, 0.3)', borderRadius: '8px', fontSize: '0.8rem', color: 'var(--success)', marginTop: 4, textAlign: 'center' }}>
-              {urlToast}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}