fixing connection with session

.claude/settings.local.json

@@ -26,7 +26,8 @@
       "mcp__puppeteer__puppeteer_navigate",
       "mcp__puppeteer__puppeteer_screenshot",
       "mcp__puppeteer__puppeteer_click",
-      "mcp__puppeteer__puppeteer_evaluate"
+      "mcp__puppeteer__puppeteer_evaluate",
+      "mcp__sequential-thinking__sequentialthinking"
     ],
     "deny": [],
     "ask": []

app/components/FileManager.tsx

@@ -110,12 +110,12 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         const publicPath = currentPath === 'public' ? '' : currentPath.replace('public/', '')
         response = await fetch(`/api/public?folder=${encodeURIComponent(publicPath)}`)
       } else {
-        // Load from regular files API with session headers
+        // Load from session files API with session headers
         const headers: Record<string, string> = {}
         if (sessionId) {
           headers['x-session-id'] = sessionId
         }
-        response = await fetch(`/api/files?folder=${encodeURIComponent(currentPath)}`, { headers })
+        response = await fetch(`/api/sessions/files`, { headers })
       }
 
       const data = await response.json()
@@ -170,10 +170,15 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
           body: formData
         })
       } else {
-        // Upload to regular folder
+        // Upload to session folder
         formData.append('folder', targetFolder)
-        response = await fetch('/api/upload', {
+        const headers: Record<string, string> = {}
+        if (sessionId) {
+          headers['x-session-id'] = sessionId
+        }
+        response = await fetch('/api/sessions/upload', {
           method: 'POST',
+          headers,
           body: formData
         })
       }

app/components/ResearchBrowser.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import Window from './Window'
-import { Search, Globe, BookOpen, Brain, Loader2, Send, X, ChevronDown, ChevronUp, Sparkles, AlertCircle } from 'lucide-react'
+import { Search, Globe, Brain, Loader2, X, ChevronDown, ChevronUp, Sparkles, AlertCircle, Mic, Scan, ArrowLeft, Bot } from 'lucide-react'
 
 interface ResearchAgent {
   id: string
@@ -9,6 +9,7 @@ interface ResearchAgent {
   query: string
   results: string[]
   progress: number
+  currentUrl?: string
 }
 
 interface ResearchResult {
@@ -31,6 +32,7 @@ interface ResearchBrowserProps {
 export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBrowserProps) {
   const [prompt, setPrompt] = useState('')
   const [isResearching, setIsResearching] = useState(false)
+  const [hasSearched, setHasSearched] = useState(false)
   const [agents, setAgents] = useState<ResearchAgent[]>([])
   const [results, setResults] = useState<ResearchResult[]>([])
   const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set())
@@ -207,24 +209,125 @@ export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBro
     if (!prompt.trim()) return
 
     setIsResearching(true)
+    setHasSearched(true)
     setResults([])
 
     // Initialize agents
     const newAgents = initializeAgents(prompt)
 
-    // Run agents in parallel
-    const agentPromises = newAgents.map((agent, index) => {
-      // Stagger agent starts for visual effect
+    try {
+      // Call Gemini to perform "Deep Research"
+      const response = await fetch('/api/gemini/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Perform a deep research on: "${prompt}". 
+          Return a JSON object with:
+          1. "crawledUrls": a list of 5-10 plausible URLs that were "crawled".
+          2. "results": a list of 5-8 research findings. Each finding has:
+             - title
+             - summary (2-3 sentences)
+             - source (domain name)
+             - url
+             - relevance (0.8 to 1.0)
+             - agentId (assign one of: 'web-search', 'academic', 'news', 'deep-analysis', 'fact-check')
+          Return ONLY raw JSON, no markdown formatting.`
+        })
+      })
+
+      const data = await response.json()
+      let parsedData
+
+      try {
+        // Clean up markdown code blocks if present
+        const cleanText = data.response.replace(/```json/g, '').replace(/```/g, '').trim()
+        parsedData = JSON.parse(cleanText)
+      } catch (e) {
+        console.error('Failed to parse Gemini response, falling back to mocks', e)
+        parsedData = null
+      }
+
+      if (parsedData && parsedData.results) {
+        // Simulate crawling and processing
+        const totalDuration = 4000 // 4 seconds total simulation
+        const interval = totalDuration / newAgents.length
+
+        // Update agents with crawling status
+        newAgents.forEach((agent, index) => {
+          setTimeout(() => {
+            setAgents(prev => prev.map(a => {
+              if (a.id === agent.id) {
+                // Assign random crawled URLs to this agent
+                const agentUrls = parsedData.crawledUrls
+                  ? parsedData.crawledUrls.slice(index * 2, (index * 2) + 2)
+                  : [`https://example.com/search?q=${encodeURIComponent(prompt)}`]
+
+                return {
+                  ...a,
+                  status: 'searching',
+                  progress: 30,
+                  currentUrl: agentUrls[0] || 'Scanning web...'
+                  // We could store these URLs to show what's being crawled if we added a UI for it
+                }
+              }
+              return a
+            }))
+          }, index * interval)
+
+          setTimeout(() => {
+            setAgents(prev => prev.map(a =>
+              a.id === agent.id ? { ...a, status: 'analyzing', progress: 70, currentUrl: 'Analyzing content...' } : a
+            ))
+          }, (index * interval) + (interval / 2))
+
+          setTimeout(() => {
+            setAgents(prev => prev.map(a => {
+              if (a.id === agent.id) {
+                const agentResults = parsedData.results.filter((r: any) => r.agentId === agent.id)
+                return {
+                  ...a,
+                  status: 'complete',
+                  progress: 100,
+                  results: agentResults.map((r: any) => r.title)
+                }
+              }
+              return a
+            }))
+          }, totalDuration + (index * 200))
+        })
+
+        // Set final results after simulation
+        setTimeout(() => {
+          const formattedResults = parsedData.results.map((r: any, i: number) => ({
+            ...r,
+            id: `res-${i}`,
+            timestamp: new Date(),
+            relevance: r.relevance || 0.9
+          }))
+          setResults(formattedResults)
+          setIsResearching(false)
+        }, totalDuration + 1000)
+
+      } else {
+        // Fallback to mocks if Gemini fails or returns invalid data
+        runMockSimulation(newAgents)
+      }
+
+    } catch (error) {
+      console.error('Research failed', error)
+      runMockSimulation(newAgents)
+    }
+  }
+
+  const runMockSimulation = async (currentAgents: ResearchAgent[]) => {
+    const agentPromises = currentAgents.map((agent, index) => {
       return new Promise(resolve => {
         setTimeout(() => {
           runAgent(agent).then(resolve)
         }, index * 500)
       })
     })
-
-    // Wait for all agents to complete
     await Promise.all(agentPromises)
-
     setIsResearching(false)
   }
 
@@ -249,14 +352,21 @@ export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBro
       case 'analyzing':
         return <Brain className="animate-pulse" size={16} />
       case 'complete':
-        return <Sparkles className="text-green-500" size={16} />
+        return <Sparkles className="text-green-400" size={16} />
       case 'error':
-        return <AlertCircle className="text-red-500" size={16} />
+        return <AlertCircle className="text-red-400" size={16} />
       default:
         return <Globe size={16} />
     }
   }
 
+  const resetSearch = () => {
+    setHasSearched(false)
+    setPrompt('')
+    setResults([])
+    setAgents([])
+  }
+
   return (
     <Window
       id="research-browser"
@@ -269,92 +379,136 @@ export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBro
       height={800}
       x={100}
       y={100}
+      darkMode={true}
       className="research-browser-window"
+      contentClassName="bg-[#050505] text-white"
     >
-      <div className="flex flex-col h-full bg-white">
-        {/* Search Bar */}
-        <div className="bg-gradient-to-r from-purple-600 to-blue-600 p-4">
-          <div className="flex gap-2">
-            <div className="flex-1 flex items-center bg-white/10 backdrop-blur rounded-lg px-4 py-3">
-              <Search size={20} className="text-white/80 mr-3" />
-              <input
-                type="text"
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                onKeyPress={(e) => e.key === 'Enter' && !isResearching && handleResearch()}
-                placeholder="Enter your research query..."
-                className="flex-1 bg-transparent outline-none text-white placeholder-white/60"
-                disabled={isResearching}
-              />
-            </div>
-            <button
-              onClick={handleResearch}
-              disabled={isResearching || !prompt.trim()}
-              className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-            >
-              {isResearching ? (
-                <>
-                  <Loader2 className="animate-spin" size={20} />
-                  Researching...
-                </>
-              ) : (
-                <>
-                  <Send size={20} />
-                  Research
-                </>
-              )}
-            </button>
-          </div>
+      <div className="flex flex-col h-full relative overflow-hidden">
+        {/* Background Effects */}
+        <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
+          <div className="absolute top-[-20%] left-[20%] w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px]" />
+          <div className="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[100px]" />
         </div>
 
-        {/* Main Content */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Left Panel - Research Agents */}
-          <div className="w-80 border-r border-gray-200 bg-gray-50 overflow-y-auto">
-            <div className="p-4">
-              <h3 className="text-sm font-semibold text-gray-700 mb-3">Research Agents</h3>
-
-              {agents.length === 0 ? (
-                <div className="text-center text-gray-500 py-8">
-                  <Brain size={48} className="mx-auto mb-3 text-gray-300" />
-                  <p className="text-sm">Enter a query to start research</p>
+        {!hasSearched ? (
+          // Initial Home View
+          <div className="flex-1 flex flex-col items-center justify-center p-8 relative z-10 animate-in fade-in duration-700">
+            {/* Logo */}
+            <div className="mb-8 relative group">
+              <div className="absolute inset-0 bg-blue-500/30 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500" />
+              <div className="relative bg-gradient-to-br from-blue-500 to-cyan-400 p-4 rounded-2xl shadow-lg shadow-blue-500/20 border border-white/10">
+                <Bot size={48} className="text-white" />
+              </div>
+            </div>
+
+            {/* Greeting */}
+            <h1 className="text-5xl font-bold text-white mb-12 tracking-tight">Welcome to DeepResearch</h1>
+
+            {/* Search Bar */}
+            <div className="w-full max-w-2xl relative group">
+              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-md group-hover:blur-lg transition-all duration-500 opacity-0 group-hover:opacity-100" />
+              <div className="relative bg-[#1a1a1a]/80 backdrop-blur-xl border border-white/10 rounded-full p-2 flex items-center shadow-2xl">
+                <div className="pl-4 pr-2">
+                  <div className="w-6 h-6 border-l-2 border-blue-500/50 h-4 mx-2" />
                 </div>
-              ) : (
-                <div className="space-y-2">
+                <input
+                  type="text"
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && handleResearch()}
+                  placeholder="Search now"
+                  className="flex-1 bg-transparent border-none outline-none text-white placeholder-gray-500 text-lg px-2 h-12"
+                  autoFocus
+                />
+                <div className="flex items-center gap-2 pr-2">
+                  <button className="p-2 text-gray-400 hover:text-white transition-colors rounded-full hover:bg-white/5">
+                    <Scan size={20} />
+                  </button>
+                  <button
+                    onClick={handleResearch}
+                    className="p-3 bg-white text-black rounded-full hover:bg-gray-200 transition-colors"
+                  >
+                    {isResearching ? <Loader2 size={20} className="animate-spin" /> : <Mic size={20} />}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          // Results View
+          <div className="flex flex-col h-full relative z-10">
+            {/* Top Bar */}
+            <div className="flex items-center gap-4 p-4 border-b border-white/10 bg-[#0a0a0a]/50 backdrop-blur-md">
+              <button
+                onClick={resetSearch}
+                className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+              >
+                <ArrowLeft size={20} className="text-gray-400" />
+              </button>
+              <div className="flex-1 relative">
+                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+                <input
+                  type="text"
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && !isResearching && handleResearch()}
+                  className="w-full bg-[#1a1a1a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white focus:outline-none focus:border-blue-500/50 transition-colors"
+                />
+              </div>
+            </div>
+
+            <div className="flex-1 flex overflow-hidden">
+              {/* Left Panel - Agents */}
+              <div className="w-80 border-r border-white/10 bg-[#0a0a0a]/30 overflow-y-auto p-4">
+                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Research Agents</h3>
+                <div className="space-y-3">
                   {agents.map(agent => (
                     <div
                       key={agent.id}
-                      className="bg-white rounded-lg border border-gray-200 overflow-hidden"
+                      className="bg-[#1a1a1a] rounded-lg border border-white/5 overflow-hidden"
                     >
                       <button
                         onClick={() => toggleAgentExpansion(agent.id)}
-                        className="w-full px-3 py-2 flex items-center justify-between hover:bg-gray-50 transition-colors"
+                        className="w-full px-3 py-3 flex items-center justify-between hover:bg-white/5 transition-colors"
                       >
-                        <div className="flex items-center gap-2">
-                          {getAgentStatusIcon(agent.status)}
-                          <span className="text-sm font-medium">{agent.name}</span>
+                        <div className="flex items-center gap-3">
+                          <div className={`p-1.5 rounded-md ${agent.status === 'complete' ? 'bg-green-500/10 text-green-400' :
+                            agent.status === 'error' ? 'bg-red-500/10 text-red-400' :
+                              agent.status === 'searching' || agent.status === 'analyzing' ? 'bg-blue-500/10 text-blue-400' :
+                                'bg-gray-500/10 text-gray-400'
+                            }`}>
+                            {getAgentStatusIcon(agent.status)}
+                          </div>
+                          <span className="text-sm font-medium text-gray-200">{agent.name}</span>
                         </div>
-                        {expandedAgents.has(agent.id) ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                        {expandedAgents.has(agent.id) ? <ChevronUp size={14} className="text-gray-500" /> : <ChevronDown size={14} className="text-gray-500" />}
                       </button>
 
                       {expandedAgents.has(agent.id) && (
-                        <div className="px-3 py-2 border-t border-gray-100">
+                        <div className="px-3 py-3 border-t border-white/5 bg-black/20">
                           <div className="text-xs text-gray-600 mb-2">
-                            Status: <span className="font-medium capitalize">{agent.status}</span>
+                            <div className="flex justify-between items-center mb-1">
+                              <span>Status: <span className="font-medium capitalize text-gray-300">{agent.status}</span></span>
+                            </div>
+                            {agent.currentUrl && (agent.status === 'searching' || agent.status === 'analyzing') && (
+                              <div className="text-blue-400 truncate max-w-full mb-2 font-mono text-[10px]">
+                                Crawling: {agent.currentUrl}
+                              </div>
+                            )}
                           </div>
                           {agent.progress > 0 && agent.progress < 100 && (
                             <div className="mb-2">
-                              <div className="w-full bg-gray-200 rounded-full h-1.5">
+                              <div className="w-full bg-gray-800 rounded-full h-1">
                                 <div
-                                  className="bg-purple-600 h-1.5 rounded-full transition-all duration-500"
+                                  className="bg-blue-500 h-1 rounded-full transition-all duration-500"
                                   style={{ width: `${agent.progress}%` }}
                                 />
                               </div>
                             </div>
                           )}
                           {agent.results.length > 0 && (
-                            <div className="text-xs text-gray-600">
-                              Found {agent.results.length} results
+                            <div className="text-xs text-gray-500">
+                              Found <span className="text-white">{agent.results.length}</span> results
                             </div>
                           )}
                         </div>
@@ -362,142 +516,133 @@ export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBro
                     </div>
                   ))}
                 </div>
-              )}
-            </div>
-          </div>
+              </div>
 
-          {/* Right Panel - Results */}
-          <div className="flex-1 overflow-y-auto" ref={resultsRef}>
-            <div className="p-6">
-              {results.length === 0 && !isResearching ? (
-                <div className="text-center py-16">
-                  <BookOpen size={64} className="mx-auto mb-4 text-gray-300" />
-                  <h3 className="text-xl font-semibold text-gray-700 mb-2">Ready to Research</h3>
-                  <p className="text-gray-500">Enter a query above and our AI agents will search multiple sources</p>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-gray-800">
-                      Research Results ({results.length})
-                    </h3>
-                    {results.length > 0 && (
-                      <div className="text-sm text-gray-500">
-                        Sorted by relevance
-                      </div>
-                    )}
-                  </div>
+              {/* Right Panel - Results */}
+              <div className="flex-1 overflow-y-auto p-6" ref={resultsRef}>
+                <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
+                  <Sparkles size={20} className="text-blue-400" />
+                  Research Results
+                </h3>
 
+                <div className="space-y-4">
                   {results
                     .sort((a, b) => b.relevance - a.relevance)
                     .map(result => (
                       <div
                         key={result.id}
-                        className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer"
+                        className="group bg-[#1a1a1a] border border-white/5 rounded-xl p-5 hover:border-blue-500/30 hover:bg-[#202020] transition-all cursor-pointer"
                         onClick={() => setSelectedResult(result)}
                       >
-                        <div className="flex items-start justify-between mb-2">
-                          <h4 className="text-base font-semibold text-blue-600 hover:text-blue-800 flex-1">
+                        <div className="flex items-start justify-between mb-3">
+                          <h4 className="text-lg font-medium text-blue-400 group-hover:text-blue-300 transition-colors flex-1">
                             {result.title}
                           </h4>
-                          <div className="flex items-center gap-2 ml-4">
-                            <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">
-                              {Math.round(result.relevance * 100)}% match
-                            </span>
-                          </div>
+                          <span className="text-xs bg-blue-500/10 text-blue-400 px-2 py-1 rounded ml-4 border border-blue-500/20">
+                            {Math.round(result.relevance * 100)}% match
+                          </span>
                         </div>
 
-                        <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+                        <p className="text-sm text-gray-400 mb-4 line-clamp-2 leading-relaxed">
                           {result.summary}
                         </p>
 
                         <div className="flex items-center justify-between text-xs text-gray-500">
                           <div className="flex items-center gap-4">
-                            <span className="flex items-center gap-1">
+                            <span className="flex items-center gap-1.5">
                               <Globe size={12} />
                               {result.source}
                             </span>
-                            <span>
+                            <span className="flex items-center gap-1.5">
+                              <Bot size={12} />
                               {agents.find(a => a.id === result.agentId)?.name}
                             </span>
                           </div>
                           {result.url !== '#' && (
-                            <a
-                              href={result.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              onClick={(e) => e.stopPropagation()}
-                              className="text-blue-500 hover:text-blue-700"
-                            >
-                              View Source →
-                            </a>
+                            <span className="text-blue-500/50 group-hover:text-blue-400 flex items-center gap-1 transition-colors">
+                              View Source <ArrowLeft size={12} className="rotate-180" />
+                            </span>
                           )}
                         </div>
                       </div>
                     ))}
                 </div>
-              )}
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
         {/* Selected Result Modal */}
         {selectedResult && (
           <div
-            className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]"
+            className="absolute inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-8"
             onClick={() => setSelectedResult(null)}
           >
             <div
-              className="bg-white rounded-lg max-w-3xl w-full max-h-[80vh] overflow-y-auto m-4"
+              className="bg-[#1a1a1a] border border-white/10 rounded-2xl w-full max-w-3xl max-h-full overflow-hidden flex flex-col shadow-2xl"
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold">{selectedResult.title}</h3>
+              <div className="p-6 border-b border-white/10 flex items-center justify-between bg-[#202020]">
+                <h3 className="text-xl font-semibold text-white pr-8">{selectedResult.title}</h3>
                 <button
                   onClick={() => setSelectedResult(null)}
-                  className="p-1 hover:bg-gray-100 rounded"
+                  className="p-2 hover:bg-white/10 rounded-lg text-gray-400 hover:text-white transition-colors"
                 >
                   <X size={20} />
                 </button>
               </div>
 
-              <div className="p-6">
-                <div className="flex items-center gap-4 mb-4 text-sm text-gray-600">
-                  <span className="flex items-center gap-1">
+              <div className="p-8 overflow-y-auto">
+                <div className="flex items-center gap-4 mb-6 text-sm text-gray-500">
+                  <span className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-full">
                     <Globe size={14} />
                     {selectedResult.source}
                   </span>
-                  <span className="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs">
+                  <span className="flex items-center gap-2 px-3 py-1.5 bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20">
+                    <Sparkles size={14} />
                     {Math.round(selectedResult.relevance * 100)}% relevance
                   </span>
                 </div>
 
-                <div className="prose max-w-none">
-                  <p className="text-gray-700">{selectedResult.summary}</p>
-
-                  <div className="mt-6 p-4 bg-gray-50 rounded-lg">
-                    <h4 className="font-semibold mb-2">Research Details</h4>
-                    <ul className="space-y-2 text-sm text-gray-600">
-                      <li>• Agent: {agents.find(a => a.id === selectedResult.agentId)?.name}</li>
-                      <li>• Timestamp: {selectedResult.timestamp.toLocaleString()}</li>
-                      <li>• Source URL: {selectedResult.url !== '#' ? (
-                        <a href={selectedResult.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800">
-                          {selectedResult.url}
-                        </a>
-                      ) : 'Internal Analysis'}</li>
+                <div className="prose prose-invert max-w-none">
+                  <p className="text-gray-300 text-lg leading-relaxed">{selectedResult.summary}</p>
+
+                  <div className="mt-8 p-6 bg-black/30 rounded-xl border border-white/5">
+                    <h4 className="font-semibold text-white mb-4 flex items-center gap-2">
+                      <Scan size={18} className="text-purple-400" />
+                      Research Details
+                    </h4>
+                    <ul className="space-y-3 text-sm text-gray-400">
+                      <li className="flex items-center gap-2">
+                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
+                        Agent: <span className="text-gray-300">{agents.find(a => a.id === selectedResult.agentId)?.name}</span>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
+                        Timestamp: <span className="text-gray-300">{selectedResult.timestamp.toLocaleString()}</span>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
+                        Source URL:
+                        {selectedResult.url !== '#' ? (
+                          <a href={selectedResult.url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 ml-1">
+                            {selectedResult.url}
+                          </a>
+                        ) : <span className="text-gray-300 ml-1">Internal Analysis</span>}
+                      </li>
                     </ul>
                   </div>
 
                   {selectedResult.url !== '#' && (
-                    <div className="mt-6">
+                    <div className="mt-8 flex justify-end">
                       <a
                         href={selectedResult.url}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                        className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-500 transition-all shadow-lg shadow-blue-600/20 font-medium"
                       >
                         View Full Source
-                        <Globe size={16} />
+                        <Globe size={18} />
                       </a>
                     </div>
                   )}