"use client"
import { useState } from 'react'
import { BookOpen, Search, Filter, ChevronRight, ExternalLink, Bot, Globe, Zap, Gamepad2, Activity, Settings } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ScrollArea } from '@/components/ui/scroll-area'
const documentationCategories = [
{
id: 'robots',
title: 'Robots & Hardware',
icon: Bot,
color: 'text-blue-500',
description: 'Physical and virtual robot specifications',
documents: [
{
title: 'Pilot Labs Scout Mini - Complete Profile',
description: 'Detailed technical specifications, ROS integration, and VBot implementation',
tags: ['hardware', 'ros', 'vbot', 'unity'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Moorebot Scout E - Christmas Gift 2025',
description: 'Outdoor waterproof robot with LiDAR and advanced navigation',
tags: ['hardware', 'outdoor', 'lidar'],
lastUpdated: '2025-12-02',
status: 'planned'
},
{
title: 'VBot Architecture - Unity Integration',
description: 'Complete virtual robot implementation with physics and ROS bridge',
tags: ['vbot', 'unity', 'physics', 'ros'],
lastUpdated: '2025-12-17',
status: 'complete'
}
]
},
{
id: 'environments',
title: 'AI Environments',
icon: Globe,
color: 'text-green-500',
description: 'World Labs Marble and environment generation',
documents: [
{
title: 'World Labs.ai - Complete Technical Deep Dive',
description: 'Marble platform, Gaussian splats, Chisel editing, and spatial intelligence',
tags: ['ai', 'environments', 'gaussian-splats', 'marble'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Marble Integration with Robotics MCP',
description: 'Environment loading, physics integration, and robot-environment interaction',
tags: ['integration', 'physics', 'mcp'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Gaussian Splats in Robotics Applications',
description: 'How 3D Gaussian splats revolutionize robot perception and simulation',
tags: ['gaussian-splats', 'perception', 'simulation'],
lastUpdated: '2025-12-17',
status: 'complete'
}
]
},
{
id: 'software',
title: 'Software & Integration',
icon: Zap,
color: 'text-yellow-500',
description: 'ROS, MCP, and software architecture',
documents: [
{
title: 'Robotics MCP Architecture Deep Dive',
description: 'Complete system architecture, composited servers, and data flow',
tags: ['architecture', 'mcp', 'system-design'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'ROS Integration Complete Guide',
description: 'ROS 1 Noetic setup, bridge configuration, and robot control',
tags: ['ros', 'integration', 'control'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Robotics MCP Tools Reference',
description: 'Complete API reference for all 6 portmanteau tools',
tags: ['api', 'tools', 'reference'],
lastUpdated: '2025-12-17',
status: 'complete'
}
]
},
{
id: 'vr',
title: 'VR Platforms',
icon: Gamepad2,
color: 'text-purple-500',
description: 'VRChat, Resonite, and immersive control',
documents: [
{
title: 'VRChat Integration - Robot Control',
description: 'OSC-based robot control in VRChat worlds with Udon scripting',
tags: ['vrchat', 'osc', 'udon', 'control'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Resonite Robotics Control',
description: 'ProtoFlux-based robot control in Resonite with collaborative features',
tags: ['resonite', 'protoflux', 'collaboration'],
lastUpdated: '2025-12-17',
status: 'planned'
},
{
title: 'OSC Protocol for Robotics',
description: 'Bidirectional OSC communication for real-time robot-VR synchronization',
tags: ['osc', 'protocol', 'real-time'],
lastUpdated: '2025-12-17',
status: 'complete'
}
]
},
{
id: 'development',
title: 'Development & Operations',
icon: Settings,
color: 'text-orange-500',
description: 'Development workflow and operations',
documents: [
{
title: 'Robotics MCP Development Workflow',
description: 'Complete development process, testing strategies, and CI/CD',
tags: ['development', 'testing', 'ci-cd'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Robotics MCP Setup & Installation',
description: 'Complete setup guide for all components and dependencies',
tags: ['setup', 'installation', 'configuration'],
lastUpdated: '2025-12-17',
status: 'complete'
},
{
title: 'Future Roadmap & Challenges',
description: 'Strategic roadmap through 2026 with technical challenges',
tags: ['roadmap', 'future', 'challenges'],
lastUpdated: '2025-12-17',
status: 'complete'
}
]
}
]
const quickStartGuides = [
{
title: 'Getting Started with VBot Control',
description: 'Learn to control virtual robots in minutes',
time: '5 min',
difficulty: 'Beginner'
},
{
title: 'Loading Marble Environments',
description: 'Generate and load AI environments for testing',
time: '10 min',
difficulty: 'Intermediate'
},
{
title: 'ROS Bridge Setup',
description: 'Connect physical robots via ROS',
time: '15 min',
difficulty: 'Advanced'
},
{
title: 'VRChat Robot Control',
description: 'Control robots from within VRChat worlds',
time: '8 min',
difficulty: 'Intermediate'
}
]
export default function DocumentationPage() {
const [searchQuery, setSearchQuery] = useState('')
const [selectedCategory, setSelectedCategory] = useState('all')
const [selectedDocument, setSelectedDocument] = useState(null)
const filteredDocuments = documentationCategories.flatMap(category =>
category.documents.map(doc => ({ ...doc, category: category.id, categoryTitle: category.title }))
).filter(doc => {
const matchesSearch = searchQuery === '' ||
doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
doc.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
doc.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
const matchesCategory = selectedCategory === 'all' || doc.category === selectedCategory
return matchesSearch && matchesCategory
})
const getStatusColor = (status: string) => {
switch (status) {
case 'complete': return 'bg-green-500'
case 'in-progress': return 'bg-yellow-500'
case 'planned': return 'bg-blue-500'
default: return 'bg-gray-500'
}
}
const getDifficultyColor = (difficulty: string) => {
switch (difficulty) {
case 'Beginner': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
case 'Intermediate': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
case 'Advanced': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
}
}
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto p-6 space-y-6">
{/* Header */}
<div className="text-center space-y-4 py-8">
<div className="flex items-center justify-center space-x-4">
<BookOpen className="h-12 w-12 text-primary" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary via-blue-600 to-purple-600 bg-clip-text text-transparent">
Robotics Documentation
</h1>
<BookOpen className="h-12 w-12 text-primary" />
</div>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Comprehensive documentation covering virtual robots, AI environments, ROS integration,
VR platforms, and the complete Robotics MCP ecosystem.
</p>
</div>
{/* Search and Filters */}
<div className="flex flex-col md:flex-row gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search documentation..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9"
/>
</div>
<select
className="px-3 py-2 border rounded-md bg-background md:w-48"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
<option value="all">All Categories</option>
{documentationCategories.map(category => (
<option key={category.id} value={category.id}>{category.title}</option>
))}
</select>
</div>
<Tabs defaultValue="documents" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="documents">Documentation Library</TabsTrigger>
<TabsTrigger value="quickstart">Quick Start Guides</TabsTrigger>
</TabsList>
<TabsContent value="documents" className="space-y-6">
{/* Category Overview */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{documentationCategories.map((category) => (
<Card key={category.id} className="hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => setSelectedCategory(category.id)}>
<CardHeader className="pb-3">
<div className="flex items-center space-x-3">
<category.icon className={`h-6 w-6 ${category.color}`} />
<CardTitle className="text-lg">{category.title}</CardTitle>
</div>
<CardDescription>{category.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>{category.documents.length} documents</span>
<ChevronRight className="h-4 w-4" />
</div>
</CardContent>
</Card>
))}
</div>
{/* Document List */}
<div className="space-y-4">
<h2 className="text-2xl font-bold">
{selectedCategory === 'all' ? 'All Documents' :
documentationCategories.find(c => c.id === selectedCategory)?.title || 'Documents'}
<span className="text-muted-foreground text-lg ml-2">
({filteredDocuments.length})
</span>
</h2>
<div className="grid gap-4">
{filteredDocuments.map((doc, index) => (
<Card key={index} className="hover:shadow-md transition-shadow">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex-1">
<CardTitle className="text-lg">{doc.title}</CardTitle>
<CardDescription className="mt-1">{doc.description}</CardDescription>
</div>
<div className="flex items-center space-x-2 ml-4">
<div className={`w-3 h-3 rounded-full ${getStatusColor(doc.status)}`} />
<Badge variant="outline" className="text-xs">
{doc.status}
</Badge>
</div>
</div>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="flex flex-wrap gap-1">
{doc.tags.map((tag) => (
<Badge key={tag} variant="secondary" className="text-xs">
{tag}
</Badge>
))}
</div>
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
<span>Updated: {doc.lastUpdated}</span>
<Button variant="ghost" size="sm">
<ExternalLink className="h-3 w-3" />
</Button>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</TabsContent>
<TabsContent value="quickstart" className="space-y-6">
<div className="text-center space-y-4 py-8">
<h2 className="text-3xl font-bold">Quick Start Guides</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Get up and running with robotics control in minutes. These guides provide
step-by-step instructions for common tasks and workflows.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{quickStartGuides.map((guide, index) => (
<Card key={index} className="hover:shadow-lg transition-shadow cursor-pointer">
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span>{guide.title}</span>
<Badge className={getDifficultyColor(guide.difficulty)}>
{guide.difficulty}
</Badge>
</CardTitle>
<CardDescription>{guide.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
<span>⏱️ {guide.time}</span>
<span>🚀 Ready to start</span>
</div>
<Button>
Start Guide
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</div>
</CardContent>
</Card>
))}
</div>
{/* Additional Resources */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Activity className="h-5 w-5" />
<span>Learning Resources</span>
</CardTitle>
<CardDescription>Additional resources to deepen your robotics knowledge</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
<Bot className="h-5 w-5 text-primary" />
<div>
<div className="font-medium">ROS Tutorials</div>
<div className="text-sm text-muted-foreground">Official ROS learning resources</div>
</div>
</div>
<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
<Globe className="h-5 w-5 text-blue-500" />
<div>
<div className="font-medium">World Labs Blog</div>
<div className="text-sm text-muted-foreground">Latest Marble developments</div>
</div>
</div>
<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
<Gamepad2 className="h-5 w-5 text-purple-500" />
<div>
<div className="font-medium">VRChat SDK</div>
<div className="text-sm text-muted-foreground">VRChat development documentation</div>
</div>
</div>
<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
<Zap className="h-5 w-5 text-yellow-500" />
<div>
<div className="font-medium">MCP Documentation</div>
<div className="text-sm text-muted-foreground">Model Context Protocol guides</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
</div>
)
}
