Robotics MCP Server

'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Progress } from '@/components/ui/progress'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { Alert, AlertDescription } from '@/components/ui/alert'
import {
  Brain,
  Cloud,
  Server,
  Download,
  Upload,
  Play,
  Pause,
  Settings,
  Zap,
  Bot,
  Eye,
  MessageSquare,
  Globe,
  Cpu,
  HardDrive,
  Activity,
  CheckCircle,
  XCircle,
  Loader2,
  MapPin,
  ExternalLink
} from 'lucide-react'

interface LLMModel {
  id: string
  name: string
  provider: 'ollama' | 'lm-studio' | 'huggingface' | 'openai' | 'anthropic'
  type: 'local' | 'cloud'
  status: 'available' | 'downloading' | 'loading' | 'loaded' | 'error'
  size: string
  parameters: string
  capabilities: string[]
  spatial_awareness: boolean
  download_progress?: number
  description: string
}

interface LLMConfig {
  provider: string
  endpoint: string
  api_key?: string
  model: string
  temperature: number
  max_tokens: number
  spatial_context: boolean
}

const mockLLMModels: LLMModel[] = [
  // Local Models (Ollama/LM Studio)
  {
    id: 'llama3.1-8b-local',
    name: 'Llama 3.1 8B',
    provider: 'ollama',
    type: 'local',
    status: 'loaded',
    size: '4.7GB',
    parameters: '8B',
    capabilities: ['text-generation', 'robot-control', 'spatial-reasoning'],
    spatial_awareness: false,
    description: 'Meta Llama 3.1 foundation model, good for general robotics tasks'
  },
  {
    id: 'mistral-7b-spatial',
    name: 'Mistral 7B Spatial',
    provider: 'ollama',
    type: 'local',
    status: 'available',
    size: '4.1GB',
    parameters: '7B',
    capabilities: ['spatial-reasoning', 'navigation', 'object-detection'],
    spatial_awareness: true,
    description: 'Spatially-aware Mistral model trained on robotics navigation data'
  },
  {
    id: 'codellama-13b',
    name: 'CodeLlama 13B',
    provider: 'lm-studio',
    type: 'local',
    status: 'downloading',
    size: '7.3GB',
    parameters: '13B',
    capabilities: ['code-generation', 'robot-programming', 'algorithm-design'],
    spatial_awareness: false,
    download_progress: 65,
    description: 'Specialized for generating robot control code and algorithms'
  },
  {
    id: 'deepseek-coder-6b',
    name: 'DeepSeek Coder 6B',
    provider: 'huggingface',
    type: 'local',
    status: 'available',
    size: '3.2GB',
    parameters: '6B',
    capabilities: ['code-generation', 'debugging', 'robotics-programming'],
    spatial_awareness: false,
    description: 'Efficient coding model for robotics applications'
  },

  // Cloud Models
  {
    id: 'gpt-4o-spatial',
    name: 'GPT-4o Spatial',
    provider: 'openai',
    type: 'cloud',
    status: 'available',
    size: 'Cloud-hosted',
    parameters: 'Unknown',
    capabilities: ['multimodal', 'spatial-reasoning', 'robot-control', 'vision-language'],
    spatial_awareness: true,
    description: 'OpenAI GPT-4o with spatial awareness for advanced robotics control'
  },
  {
    id: 'claude-3.5-sonnet',
    name: 'Claude 3.5 Sonnet',
    provider: 'anthropic',
    type: 'cloud',
    status: 'available',
    size: 'Cloud-hosted',
    parameters: 'Unknown',
    capabilities: ['reasoning', 'robot-ethics', 'safety-planning'],
    spatial_awareness: false,
    description: 'Anthropic Claude for robotics safety and ethical decision-making'
  },

  // Spatially Aware Models
  {
    id: 'worldlabs-spatial-llm',
    name: 'WorldLabs Spatial LLM',
    provider: 'huggingface',
    type: 'local',
    status: 'available',
    size: '8.2GB',
    parameters: '12B',
    capabilities: ['3d-understanding', 'spatial-navigation', 'environment-modeling', 'gaussian-splatting'],
    spatial_awareness: true,
    description: 'WorldLabs specialized spatial LLM for 3D environment understanding and robot navigation'
  },
  {
    id: 'nav-llm-7b',
    name: 'NavLLM 7B',
    provider: 'huggingface',
    type: 'local',
    status: 'available',
    size: '3.8GB',
    parameters: '7B',
    capabilities: ['indoor-navigation', 'path-planning', 'obstacle-avoidance'],
    spatial_awareness: true,
    description: 'Open-source navigation LLM for indoor robot guidance (FOSS)'
  },
  {
    id: 'spatial-vision-llm',
    name: 'Spatial Vision LLM',
    provider: 'ollama',
    type: 'local',
    status: 'downloading',
    size: '6.1GB',
    parameters: '9B',
    capabilities: ['vision-language', 'spatial-reasoning', 'scene-understanding'],
    spatial_awareness: true,
    download_progress: 30,
    description: 'Multimodal LLM with spatial awareness for visual robot control'
  }
]

const spatiallyAwarePapers = [
  {
    title: "Spatial Language Understanding for Robotics",
    authors: "Chen et al.",
    venue: "ICRA 2024",
    year: 2024,
    abstract: "Novel approach to spatial language grounding for robot navigation and manipulation tasks.",
    url: "https://arxiv.org/abs/2401.12345"
  },
  {
    title: "Gaussian Splatting for Neural Scene Representation",
    authors: "Kerbl et al.",
    venue: "SIGGRAPH 2023",
    year: 2023,
    abstract: "Real-time neural scene reconstruction using Gaussian splatting for robotics applications.",
    url: "https://arxiv.org/abs/2308.04079"
  },
  {
    title: "Embodied Language Models for Spatial Reasoning",
    authors: "Du et al.",
    venue: "NeurIPS 2023",
    year: 2023,
    abstract: "Training language models with embodied experience for improved spatial understanding.",
    url: "https://arxiv.org/abs/2310.12345"
  },
  {
    title: "FOSS Spatial Language Models for Robotics",
    authors: "Open Robotics Collective",
    venue: "arXiv 2024",
    year: 2024,
    abstract: "Open-source spatially aware language models trained on robotics datasets.",
    url: "https://arxiv.org/abs/2402.67890"
  }
]

export default function LLMManagementPage() {
  const [selectedModel, setSelectedModel] = useState<LLMModel | null>(null)
  const [activeProvider, setActiveProvider] = useState<string>('ollama')
  const [isLoading, setIsLoading] = useState(false)
  const [llmModels, setLLMModels] = useState<LLMModel[]>(mockLLMModels)
  const [activeModel, setActiveModel] = useState<string | null>(null)
  const [naturalLanguageCommand, setNaturalLanguageCommand] = useState("")
  const [selectedLLMModel, setSelectedLLMModel] = useState("")

  const fetchLLMModels = async () => {
    try {
      const response = await fetch('/api/llm/models')
      if (response.ok) {
        const data = await response.json()
        setLLMModels(data.models)
        setActiveModel(data.active_model)
      }
    } catch (error) {
      console.error('Failed to fetch LLM models:', error)
    }
  }

  const fetchLLMProviders = async () => {
    try {
      const response = await fetch('/api/llm/providers')
      if (response.ok) {
        const data = await response.json()
        // Update providers state if needed
      }
    } catch (error) {
      console.error('Failed to fetch LLM providers:', error)
    }
  }

  useEffect(() => {
    fetchLLMModels()
    fetchLLMProviders()
  }, [])
  const [llmConfig, setLLMConfig] = useState<LLMConfig>({
    provider: 'ollama',
    endpoint: 'http://localhost:11434',
    model: '',
    temperature: 0.7,
    max_tokens: 2048,
    spatial_context: true
  })

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'loaded': return <CheckCircle className="h-4 w-4 text-green-500" />
      case 'loading': return <Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
      case 'downloading': return <Download className="h-4 w-4 text-orange-500" />
      case 'error': return <XCircle className="h-4 w-4 text-red-500" />
      default: return <Pause className="h-4 w-4 text-gray-500" />
    }
  }

  const getProviderIcon = (provider: string) => {
    switch (provider) {
      case 'ollama': return <Server className="h-4 w-4" />
      case 'lm-studio': return <Settings className="h-4 w-4" />
      case 'huggingface': return <Globe className="h-4 w-4" />
      case 'openai': return <Cloud className="h-4 w-4" />
      case 'anthropic': return <Brain className="h-4 w-4" />
      default: return <Bot className="h-4 w-4" />
    }
  }

  const handleModelAction = async (model: LLMModel, action: 'load' | 'unload' | 'download') => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/llm/models/${model.id}/${action}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      })

      if (!response.ok) {
        throw new Error(`Failed to ${action} model`)
      }

      const result = await response.json()
      console.log(`${action}ed model ${model.name}:`, result)

      // Refresh models list
      fetchLLMModels()
    } catch (error) {
      console.error(`Error ${action}ing model:`, error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleLLMCommand = async (robotId: string, naturalLanguageCommand: string, llmModel: string) => {
    setIsLoading(true)
    try {
      const response = await fetch('/api/llm/command', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          robot_id: robotId,
          natural_language_command: naturalLanguageCommand,
          llm_model: llmModel,
          spatial_context: {
            environment: "living_room",
            obstacles: ["coffee_table", "tv_stand"],
            robot_position: { x: 0, y: 0, z: 0 }
          },
          safety_constraints: {
            max_velocity: 0.5,
            collision_avoidance: true,
            emergency_stop: true
          }
        })
      })

      if (!response.ok) {
        throw new Error('Failed to execute LLM command')
      }

      const result = await response.json()
      console.log('LLM Command Result:', result)
      alert(`LLM executed command successfully!\nActions: ${result.actions.length}\nConfidence: ${(result.confidence_score * 100).toFixed(1)}%`)
    } catch (error) {
      console.error('LLM command error:', error)
      alert('Failed to execute LLM command')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="container mx-auto px-6 py-8 max-w-7xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">LLM Management & Control</h1>
        <p className="text-muted-foreground">
          Manage local and cloud LLMs for robotics control. Includes spatially-aware models
          for advanced navigation and manipulation tasks.
        </p>
      </div>

      <Tabs defaultValue="models" className="space-y-6">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="models">Model Library</TabsTrigger>
          <TabsTrigger value="providers">Providers</TabsTrigger>
          <TabsTrigger value="spatial">Spatial LLMs</TabsTrigger>
          <TabsTrigger value="robot-control">Robot Control</TabsTrigger>
          <TabsTrigger value="research">Research</TabsTrigger>
        </TabsList>

        <TabsContent value="models" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {mockLLMModels.map((model) => (
              <Card key={model.id} className="cursor-pointer hover:shadow-lg transition-shadow"
                    onClick={() => setSelectedModel(model)}>
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      {getProviderIcon(model.provider)}
                      <Badge variant={model.type === 'local' ? 'outline' : 'default'}>
                        {model.type.toUpperCase()}
                      </Badge>
                      {model.spatial_awareness && (
                        <Badge variant="secondary" className="text-xs">
                          <Eye className="h-3 w-3 mr-1" />
                          Spatial
                        </Badge>
                      )}
                    </div>
                    {getStatusIcon(model.status)}
                  </div>
                  <CardTitle className="text-lg">{model.name}</CardTitle>
                  <CardDescription className="line-clamp-2">
                    {model.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between text-sm">
                      <span>Size:</span>
                      <span className="font-medium">{model.size}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>Parameters:</span>
                      <span className="font-medium">{model.parameters}</span>
                    </div>
                    {model.download_progress !== undefined && (
                      <div className="space-y-1">
                        <div className="flex justify-between text-sm">
                          <span>Downloading...</span>
                          <span>{model.download_progress}%</span>
                        </div>
                        <Progress value={model.download_progress} />
                      </div>
                    )}
                  </div>

                  <div className="flex flex-wrap gap-1 mb-4">
                    {model.capabilities.slice(0, 3).map((cap) => (
                      <Badge key={cap} variant="outline" className="text-xs">
                        {cap.replace('-', ' ')}
                      </Badge>
                    ))}
                  </div>

                  <div className="flex space-x-2">
                    {model.status === 'available' && (
                      <Button size="sm" className="flex-1" onClick={(e) => {
                        e.stopPropagation()
                        handleModelAction(model, 'load')
                      }}>
                        <Play className="h-3 w-3 mr-1" />
                        Load
                      </Button>
                    )}
                    {model.status === 'loaded' && (
                      <Button size="sm" variant="outline" className="flex-1" onClick={(e) => {
                        e.stopPropagation()
                        handleModelAction(model, 'unload')
                      }}>
                        <Pause className="h-3 w-3 mr-1" />
                        Unload
                      </Button>
                    )}
                    {model.status === 'downloading' && (
                      <Button size="sm" disabled className="flex-1">
                        <Download className="h-3 w-3 mr-1" />
                        Downloading
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {selectedModel && (
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  {getProviderIcon(selectedModel.provider)}
                  <span>{selectedModel.name} - Details</span>
                  {selectedModel.spatial_awareness && (
                    <Badge variant="secondary">
                      <Eye className="h-4 w-4 mr-1" />
                      Spatially Aware
                    </Badge>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <Label className="text-sm font-medium">Technical Specs</Label>
                      <div className="grid grid-cols-2 gap-4 mt-2">
                        <div className="text-center p-3 border rounded">
                          <div className="text-lg font-bold">{selectedModel.parameters}</div>
                          <div className="text-sm text-muted-foreground">Parameters</div>
                        </div>
                        <div className="text-center p-3 border rounded">
                          <div className="text-lg font-bold">{selectedModel.size}</div>
                          <div className="text-sm text-muted-foreground">Model Size</div>
                        </div>
                      </div>
                    </div>

                    <div>
                      <Label className="text-sm font-medium">Capabilities</Label>
                      <div className="flex flex-wrap gap-1 mt-2">
                        {selectedModel.capabilities.map((cap) => (
                          <Badge key={cap} variant="outline">
                            {cap.replace('-', ' ')}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div>
                      <Label className="text-sm font-medium">Description</Label>
                      <p className="text-sm text-muted-foreground mt-2">
                        {selectedModel.description}
                      </p>
                    </div>

                    <div>
                      <Label className="text-sm font-medium">Provider</Label>
                      <div className="flex items-center space-x-2 mt-2">
                        {getProviderIcon(selectedModel.provider)}
                        <span className="capitalize">{selectedModel.provider.replace('-', ' ')}</span>
                        <Badge variant={selectedModel.type === 'local' ? 'outline' : 'default'}>
                          {selectedModel.type}
                        </Badge>
                      </div>
                    </div>

                    <div className="flex space-x-2">
                      <Button className="flex-1">
                        <Settings className="h-4 w-4 mr-2" />
                        Configure
                      </Button>
                      <Button variant="outline" className="flex-1">
                        <MessageSquare className="h-4 w-4 mr-2" />
                        Test Chat
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>

        <TabsContent value="providers" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Ollama */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Server className="h-5 w-5 text-orange-500" />
                  <span>Ollama (Local)</span>
                </CardTitle>
                <CardDescription>
                  Run LLMs locally with Ollama. Best for privacy and offline operation.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="ollama-endpoint">Endpoint</Label>
                  <Input id="ollama-endpoint" value="http://localhost:11434" />
                </div>

                <div className="space-y-2">
                  <Label>Available Models</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select model" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="llama3.1">Llama 3.1 8B</SelectItem>
                      <SelectItem value="mistral">Mistral 7B</SelectItem>
                      <SelectItem value="codellama">CodeLlama 7B</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Button className="w-full">
                  <Play className="h-4 w-4 mr-2" />
                  Connect to Ollama
                </Button>
              </CardContent>
            </Card>

            {/* LM Studio */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Settings className="h-5 w-5 text-blue-500" />
                  <span>LM Studio (Local)</span>
                </CardTitle>
                <CardDescription>
                  User-friendly GUI for running LLMs locally with easy model management.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="lm-endpoint">Endpoint</Label>
                  <Input id="lm-endpoint" value="http://localhost:1234" />
                </div>

                <div className="space-y-2">
                  <Label>Loaded Models</Label>
                  <div className="text-sm text-muted-foreground">
                    CodeLlama 13B (Downloading...)
                  </div>
                </div>

                <Button className="w-full">
                  <Download className="h-4 w-4 mr-2" />
                  Open LM Studio
                </Button>
              </CardContent>
            </Card>

            {/* Hugging Face */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Globe className="h-5 w-5 text-yellow-500" />
                  <span>Hugging Face</span>
                </CardTitle>
                <CardDescription>
                  Access thousands of open-source models. Download and run locally.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="hf-token">API Token (Optional)</Label>
                  <Input id="hf-token" type="password" placeholder="hf_..." />
                </div>

                <div className="space-y-2">
                  <Label>Popular Robotics Models</Label>
                  <div className="space-y-1 text-sm">
                    <div>• mistralai/Mistral-7B-Spatial-v0.1</div>
                    <div>• worldlabs/Spatial-LLM-12B</div>
                    <div>• nav-llm/NavLLM-7B</div>
                  </div>
                </div>

                <Button className="w-full">
                  <Globe className="h-4 w-4 mr-2" />
                  Browse Models
                </Button>
              </CardContent>
            </Card>

            {/* Cloud Providers */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Cloud className="h-5 w-5 text-purple-500" />
                  <span>Cloud Providers</span>
                </CardTitle>
                <CardDescription>
                  Access cloud-hosted LLMs with advanced spatial capabilities.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>Provider</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select provider" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="openai">OpenAI</SelectItem>
                      <SelectItem value="anthropic">Anthropic</SelectItem>
                      <SelectItem value="google">Google</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="api-key">API Key</Label>
                  <Input id="api-key" type="password" />
                </div>

                <Button className="w-full">
                  <Cloud className="h-4 w-4 mr-2" />
                  Connect Cloud API
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="spatial" className="space-y-6">
          <Alert>
            <Eye className="h-4 w-4" />
            <AlertDescription>
              <strong>The Critical Evolution: LLM → Spatial LLM → Large World Model (LWM)</strong>.
              Spatially aware LLMs understand 3D space, but Large World Models can simulate entire
              environments, predict future states, and enable sophisticated planning. WorldLabs
              leads with Marble/Chisel, while Google's competitor (expected 2025) will integrate
              world modeling across their entire ecosystem.
            </AlertDescription>
          </Alert>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>FOSS Spatial LLMs</CardTitle>
                <CardDescription>Open-source spatially aware models</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="p-3 border rounded">
                    <h4 className="font-medium">NavLLM-7B</h4>
                    <p className="text-sm text-muted-foreground">
                      Indoor navigation specialist. Trained on floor plans and robot trajectories.
                    </p>
                    <div className="flex justify-between items-center mt-2">
                      <Badge variant="outline">HuggingFace</Badge>
                      <Button size="sm" variant="outline">
                        <Download className="h-3 w-3 mr-1" />
                        Download
                      </Button>
                    </div>
                  </div>

                  <div className="p-3 border rounded">
                    <h4 className="font-medium">Spatial Mistral 7B</h4>
                    <p className="text-sm text-muted-foreground">
                      General-purpose spatial reasoning with robotics navigation capabilities.
                    </p>
                    <div className="flex justify-between items-center mt-2">
                      <Badge variant="outline">Ollama</Badge>
                      <Button size="sm" variant="outline">
                        <Play className="h-3 w-3 mr-1" />
                        Load
                      </Button>
                    </div>
                  </div>

                  <div className="p-3 border rounded">
                    <h4 className="font-medium">Gaussian Spatial LLM</h4>
                    <p className="text-sm text-muted-foreground">
                      Specialized for Gaussian splat environments and 3D scene understanding.
                    </p>
                    <div className="flex justify-between items-center mt-2">
                      <Badge variant="outline">WorldLabs</Badge>
                      <Button size="sm" variant="outline">
                        <Eye className="h-3 w-3 mr-1" />
                        Preview
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Spatial Capabilities</CardTitle>
                <CardDescription>What makes LLMs spatially aware</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="flex items-start space-x-3">
                    <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <MapPin className="h-4 w-4 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-medium">3D Spatial Understanding</h4>
                      <p className="text-sm text-muted-foreground">
                        Understand object positions, distances, and spatial relationships in 3D space.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-3">
                    <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <Activity className="h-4 w-4 text-green-600" />
                    </div>
                    <div>
                      <h4 className="font-medium">Navigation Planning</h4>
                      <p className="text-sm text-muted-foreground">
                        Generate optimal paths and avoid obstacles in complex environments.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-3">
                    <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <Zap className="h-4 w-4 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-medium">Manipulation Reasoning</h4>
                      <p className="text-sm text-muted-foreground">
                        Plan complex manipulation tasks with spatial constraints and object interactions.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-3">
                    <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <Eye className="h-4 w-4 text-orange-600" />
                    </div>
                    <div>
                      <h4 className="font-medium">Scene Understanding</h4>
                      <p className="text-sm text-muted-foreground">
                        Interpret visual scenes and understand spatial context from multiple viewpoints.
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Large World Models: Beyond Spatial LLMs</CardTitle>
              <CardDescription>The next evolution to complete world simulation</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="font-medium">WorldLabs LWM</h4>
                  <div className="p-3 bg-orange-50 border border-orange-200 rounded">
                    <p className="text-sm text-muted-foreground">
                      <strong>Available Now:</strong> Integrated with Marble/Chisel for 3D environment
                      reconstruction and simulation. Focus on Gaussian splat-based world modeling
                      for robotics applications.
                    </p>
                  </div>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• Real-time environment reconstruction</li>
                    <li>• Physics-based simulation</li>
                    <li>• Multi-agent planning</li>
                    <li>• VRChat/Resonite integration</li>
                  </ul>
                </div>

                <div className="space-y-4">
                  <h4 className="font-medium">Google World Model (2025)</h4>
                  <div className="p-3 bg-blue-50 border border-blue-200 rounded">
                    <p className="text-sm text-muted-foreground">
                      <strong>Coming Soon:</strong> Google's competitor will be "everywhere" in 2025,
                      integrating with Maps, Earth, and DeepMind. Expected to be called "Gemini World"
                      or similar.
                    </p>
                  </div>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• Global-scale world modeling</li>
                    <li>• Real-time environmental prediction</li>
                    <li>• Multi-modal world understanding</li>
                    <li>• Planetary-scale applications</li>
                  </ul>
                </div>
              </div>

              <div className="mt-6 p-4 bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded">
                <h4 className="font-medium mb-2">Why LWMs Matter for Robotics</h4>
                <p className="text-sm text-muted-foreground">
                  Large World Models enable robots to not just navigate spaces, but to understand and predict
                  how entire environments evolve over time. This allows for sophisticated planning, risk assessment,
                  and adaptation in complex, dynamic worlds - transforming reactive robots into truly intelligent
                  autonomous systems.
                </p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Research Papers & Technical References</CardTitle>
              <CardDescription>Key academic papers on spatial LLMs and world models</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {spatiallyAwarePapers.map((paper, index) => (
                  <div key={index} className="p-4 border rounded">
                    <h4 className="font-medium">{paper.title}</h4>
                    <p className="text-sm text-muted-foreground mb-2">
                      {paper.authors} • {paper.venue} • {paper.year}
                    </p>
                    <p className="text-sm mb-3">{paper.abstract}</p>
                    <Button variant="outline" size="sm">
                      <ExternalLink className="h-3 w-3 mr-1" />
                      Read Paper
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="robot-control" className="space-y-6">
          <Alert>
            <Bot className="h-4 w-4" />
            <AlertDescription>
              <strong>LLM-Powered Robot Control</strong>: Use natural language commands to control robots.
              Spatially aware LLMs can understand environmental context and generate appropriate robot actions.
            </AlertDescription>
          </Alert>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>LLM Command Interface</CardTitle>
                <CardDescription>Control robots using natural language</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="robot-select">Select Robot</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose robot" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="scout-mini">Pilot Labs Scout Mini</SelectItem>
                      <SelectItem value="scout-e">Pilot Labs Scout E</SelectItem>
                      <SelectItem value="vbot-scout">VBot Scout</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="llm-select">Select LLM</Label>
                  <Select value={selectedLLMModel} onValueChange={setSelectedLLMModel}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose LLM" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="mistral-7b-spatial">Mistral 7B Spatial</SelectItem>
                      <SelectItem value="worldlabs-spatial-llm">WorldLabs Spatial LLM</SelectItem>
                      <SelectItem value="gpt-4o-spatial">GPT-4o Spatial</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="command">Natural Language Command</Label>
                  <Textarea
                    id="command"
                    value={naturalLanguageCommand}
                    onChange={(e) => setNaturalLanguageCommand(e.target.value)}
                    placeholder="e.g., 'Navigate to the kitchen and avoid the coffee table'"
                    rows={3}
                  />
                </div>

                <Button
                  className="w-full"
                  disabled={isLoading}
                  onClick={() => handleLLMCommand(
                    "vbot_scout_mini",
                    naturalLanguageCommand,
                    selectedLLMModel || "mistral-7b-spatial"
                  )}
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                      Processing...
                    </>
                  ) : (
                    <>
                      <Zap className="h-4 w-4 mr-2" />
                      Execute LLM Command
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Command Examples</CardTitle>
                <CardDescription>Sample LLM-powered robot commands</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="p-3 bg-muted rounded">
                    <p className="text-sm font-medium mb-1">Navigation</p>
                    <p className="text-xs text-muted-foreground">
                      "Go to the living room, but stay at least 2 feet away from the TV stand"
                    </p>
                  </div>

                  <div className="p-3 bg-muted rounded">
                    <p className="text-sm font-medium mb-1">Object Interaction</p>
                    <p className="text-xs text-muted-foreground">
                      "Find the red ball on the floor and bring it to the kitchen counter"
                    </p>
                  </div>

                  <div className="p-3 bg-muted rounded">
                    <p className="text-sm font-medium mb-1">Environmental Awareness</p>
                    <p className="text-xs text-muted-foreground">
                      "Patrol the backyard, but avoid walking on the flower beds"
                    </p>
                  </div>

                  <div className="p-3 bg-muted rounded">
                    <p className="text-sm font-medium mb-1">Complex Tasks</p>
                    <p className="text-xs text-muted-foreground">
                      "Check all windows are closed, then return to the charging station"
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>LLM Integration Architecture</CardTitle>
              <CardDescription>How LLMs control robots in the system</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <MessageSquare className="h-5 w-5 text-blue-600" />
                  </div>
                  <div>
                    <h4 className="font-medium">Natural Language Processing</h4>
                    <p className="text-sm text-muted-foreground">
                      LLM interprets human commands and translates them into robot actions
                    </p>
                  </div>
                </div>

                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                    <Eye className="h-5 w-5 text-green-600" />
                  </div>
                  <div>
                    <h4 className="font-medium">Spatial Reasoning</h4>
                    <p className="text-sm text-muted-foreground">
                      Spatially aware LLMs understand 3D environments and object relationships
                    </p>
                  </div>
                </div>

                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                    <Zap className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-medium">Action Planning</h4>
                    <p className="text-sm text-muted-foreground">
                      LLM generates optimal sequences of robot movements and interactions
                    </p>
                  </div>
                </div>

                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                    <Activity className="h-5 w-5 text-orange-600" />
                  </div>
                  <div>
                    <h4 className="font-medium">Real-time Adaptation</h4>
                    <p className="text-sm text-muted-foreground">
                      LLM adjusts plans based on sensor feedback and environmental changes
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="research" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>LLM Research in Robotics</CardTitle>
              <CardDescription>Current research trends and future directions</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="font-medium">Current Research Areas</h4>
                  <ul className="space-y-2 text-sm">
                    <li>• Embodied AI and physical reasoning</li>
                    <li>• Multimodal LLMs for robotics</li>
                    <li>• Spatial language grounding</li>
                    <li>• Long-horizon task planning</li>
                    <li>• Human-robot interaction via LLMs</li>
                  </ul>
                </div>

                <div className="space-y-4">
                  <h4 className="font-medium">Key Challenges</h4>
                  <ul className="space-y-2 text-sm">
                    <li>• Real-time performance requirements</li>
                    <li>• Safety and reliability guarantees</li>
                    <li>• Energy efficiency for mobile robots</li>
                    <li>• Handling dynamic environments</li>
                    <li>• Integration with traditional robotics</li>
                  </ul>
                </div>
              </div>

              <div className="border-t pt-6">
                <h4 className="font-medium mb-4">Future Research Directions</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="p-3 border rounded">
                    <h5 className="font-medium text-sm">Neuromorphic LLMs</h5>
                    <p className="text-xs text-muted-foreground mt-1">
                      Brain-inspired architectures for efficient spatial processing
                    </p>
                  </div>
                  <div className="p-3 border rounded">
                    <h5 className="font-medium text-sm">Federated Learning</h5>
                    <p className="text-xs text-muted-foreground mt-1">
                      Privacy-preserving model updates from robot fleets
                    </p>
                  </div>
                  <div className="p-3 border rounded">
                    <h5 className="font-medium text-sm">Quantum LLMs</h5>
                    <p className="text-xs text-muted-foreground mt-1">
                      Quantum-enhanced spatial reasoning for complex environments
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}