import React, { useState, useCallback } from 'react'
// VRChat integration data
const vrchatData = {
connected: true,
user: {
displayName: 'RoboticsLab',
userId: 'usr_12345678-abcd-1234-5678-123456789abc',
avatar: 'Robot Assistant V2',
trustRank: 'Trusted User',
friendCount: 47,
instanceCapacity: 40
},
world: {
name: 'Robotics Research Center',
author: 'RoboticsLab',
worldId: 'wrld_12345678-abcd-1234-5678-123456789abc',
description: 'Advanced robotics testing and collaboration space',
capacity: 40,
tags: ['Educational', 'Robotics', 'Science', 'Interactive'],
version: '2024.1.2',
lastUpdated: '2024-01-15T10:30:00Z',
favorites: 156,
visits: 2847
},
instance: {
id: 'inst_12345678-abcd-1234-5678-123456789abc',
type: 'public',
region: 'us-west',
userCount: 23,
maxUsers: 40,
photonRegion: 'usw',
uptime: '4h 23m'
},
avatars: [
{ id: 'avtr_001', name: 'Robot Assistant V1', platform: 'PC', favorites: 23 },
{ id: 'avtr_002', name: 'Robot Assistant V2', platform: 'PC', favorites: 45 },
{ id: 'avtr_003', name: 'Maintenance Drone', platform: 'Quest', favorites: 12 }
],
worlds: [
{ id: 'wrld_001', name: 'Robotics Lab Alpha', visits: 1234, favorites: 89, author: 'RoboticsLab' },
{ id: 'wrld_002', name: 'Sensor Testing Ground', visits: 567, favorites: 34, author: 'RoboticsLab' },
{ id: 'wrld_003', name: 'Collaborative Workspace', visits: 890, favorites: 67, author: 'RoboticsLab' }
],
udon: {
scripts: 12,
events: 45,
variables: 23,
networks: 8,
interactions: 156
},
social: {
friends: 47,
friendRequests: 3,
blocked: 2,
groups: 5,
notifications: 12
},
performance: {
fps: 72,
ping: 45,
packetLoss: 0.2,
cpuUsage: 35,
gpuUsage: 68,
memoryUsage: 2.1
}
}
export default function VRChatPage() {
console.log('VRChat Integration loading...')
const [vrchat, setVrchat] = useState(vrchatData)
const [activeTab, setActiveTab] = useState('world')
const [selectedAvatar, setSelectedAvatar] = useState(vrchat.user.avatar)
const [selectedWorld, setSelectedWorld] = useState(vrchat.world.worldId)
const [mcpConnected, setMcpConnected] = useState(false)
const [usingMockData, setUsingMockData] = useState(true)
useEffect(() => {
const checkConnection = async () => {
const healthy = await mcpService.checkHealth('vrchat')
setMcpConnected(healthy)
setUsingMockData(!healthy)
}
checkConnection()
const interval = setInterval(checkConnection, 10000)
return () => clearInterval(interval)
}, [])
const changeAvatar = useCallback(async (avatarId: string) => {
const avatar = vrchat.avatars.find(a => a.id === avatarId)
if (avatar) {
setSelectedAvatar(avatar.name)
if (mcpConnected) {
try {
const result = await mcpService.vrchatCallTool('load_avatar', {
avatar_id: avatarId
})
if (result.success) {
console.log(`Avatar loaded via MCP: ${avatar.name}`)
} else {
console.warn(`MCP avatar load failed: ${result.error}`)
}
} catch (error) {
console.error('Error loading avatar via MCP:', error)
}
} else {
console.log(`Switching to avatar (MOCK): ${avatar.name}`)
}
}
}, [vrchat.avatars, mcpConnected])
const joinWorld = useCallback(async (worldId: string) => {
const world = vrchat.worlds.find(w => w.id === worldId)
if (world) {
setSelectedWorld(worldId)
if (mcpConnected) {
try {
const result = await mcpService.vrchatCallTool('join_world', {
world_id: worldId
})
if (result.success) {
console.log(`Joined world via MCP: ${world.name}`)
} else {
console.warn(`MCP join world failed: ${result.error}`)
}
} catch (error) {
console.error('Error joining world via MCP:', error)
}
} else {
console.log(`Joining world (MOCK): ${world.name}`)
}
}
}, [vrchat.worlds, mcpConnected])
const sendInvite = useCallback((friendId: string) => {
console.log(`Sending invite to friend: ${friendId}`)
}, [])
const toggleMic = useCallback(async () => {
if (mcpConnected) {
try {
const result = await mcpService.vrchatCallTool('toggle_microphone')
if (result.success) {
console.log('Microphone toggled via MCP')
}
} catch (error) {
console.error('Error toggling mic via MCP:', error)
}
} else {
console.log('Toggling microphone (MOCK)')
}
}, [mcpConnected])
const takeScreenshot = useCallback(async () => {
if (mcpConnected) {
try {
const result = await mcpService.vrchatCallTool('take_screenshot')
if (result.success) {
console.log('Screenshot taken via MCP')
}
} catch (error) {
console.error('Error taking screenshot via MCP:', error)
}
} else {
console.log('Taking screenshot (MOCK)')
}
}, [mcpConnected])
return (
<div style={{
minHeight: '100vh',
backgroundColor: '#0f172a',
color: '#f8fafc',
padding: '24px',
fontFamily: 'system-ui, -apple-system, sans-serif'
}}>
<div style={{ maxWidth: '1400px', margin: '0 auto' }}>
{/* Header */}
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '32px',
padding: '24px',
backgroundColor: '#1e293b',
borderRadius: '16px',
border: '1px solid #334155'
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
<div style={{
width: '64px',
height: '64px',
backgroundColor: '#8b5cf6',
borderRadius: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '32px'
}}>
🎭
</div>
<div>
<h1 style={{
fontSize: '32px',
fontWeight: 'bold',
color: '#f8fafc',
marginBottom: '4px'
}}>VRChat Integration</h1>
<p style={{ color: '#94a3b8' }}>Social VR robotics collaboration and avatar management</p>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{
padding: '8px 16px',
backgroundColor: mcpConnected ? '#10b981' : '#dc2626',
color: 'white',
borderRadius: '20px',
fontSize: '12px',
fontWeight: '500'
}}>
🔗 {mcpConnected ? 'MCP Connected' : 'MCP Disconnected'}
</div>
{usingMockData && (
<div style={{
padding: '6px 12px',
backgroundColor: '#f59e0b',
color: 'white',
borderRadius: '12px',
fontSize: '11px',
fontWeight: '500'
}}>
⚠️ MOCK DATA
</div>
)}
<div style={{ textAlign: 'right' }}>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>{vrchat.user.displayName}</div>
<div style={{ fontSize: '10px', color: '#64748b' }}>{vrchat.user.trustRank}</div>
</div>
<div style={{
width: '40px',
height: '40px',
backgroundColor: '#3b82f6',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer'
}}>
👤
</div>
</div>
</div>
{/* Tab Navigation */}
<div style={{
display: 'flex',
borderBottom: '1px solid #334155',
marginBottom: '24px'
}}>
{[
{ id: 'world', label: '🏠 World', icon: '🏠' },
{ id: 'avatars', label: '🎭 Avatars', icon: '🎭' },
{ id: 'social', label: '👥 Social', icon: '👥' },
{ id: 'performance', label: '📊 Performance', icon: '📊' }
].map(tab => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
style={{
padding: '12px 24px',
backgroundColor: 'transparent',
color: activeTab === tab.id ? '#8b5cf6' : '#94a3b8',
border: 'none',
borderBottom: activeTab === tab.id ? '2px solid #8b5cf6' : '2px solid transparent',
fontSize: '14px',
fontWeight: '500',
cursor: 'pointer',
transition: 'all 0.2s'
}}
>
{tab.label}
</button>
))}
</div>
{/* Tab Content */}
{activeTab === 'world' && (
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 350px',
gap: '24px'
}}>
{/* World Viewer */}
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '24px',
height: '500px'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '16px'
}}>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#f8fafc' }}>
🏠 Current World - {vrchat.world.name}
</h3>
<div style={{ display: 'flex', gap: '8px' }}>
<button
onClick={toggleMic}
style={{
padding: '6px 12px',
backgroundColor: '#10b981',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '11px',
cursor: 'pointer'
}}>🎤 Mic</button>
<button
onClick={takeScreenshot}
style={{
padding: '6px 12px',
backgroundColor: '#3b82f6',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '11px',
cursor: 'pointer'
}}>📷 Screenshot</button>
</div>
</div>
{/* VRChat World Placeholder */}
<div style={{
height: '350px',
backgroundColor: '#0f172a',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '2px dashed #475569'
}}>
<div style={{ textAlign: 'center', color: '#94a3b8' }}>
<div style={{ fontSize: '64px', marginBottom: '16px' }}>🏠</div>
<div style={{ fontSize: '18px', fontWeight: '500', marginBottom: '8px' }}>
VRChat World Active
</div>
<div style={{ fontSize: '14px' }}>
{vrchat.instance.userCount}/{vrchat.instance.maxUsers} users • {vrchat.instance.region} • {vrchat.instance.uptime} uptime
</div>
<div style={{ fontSize: '12px', marginTop: '8px', color: '#64748b' }}>
World ID: {vrchat.world.worldId.substring(0, 20)}...
</div>
</div>
</div>
</div>
{/* World Info & Controls */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
{/* Launch Controls */}
<LaunchControls
appId="vrchat"
appName="VRChat"
onStatusChange={(running) => {
// Update UI based on app status if needed
}}
/>
{/* World Stats */}
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '24px'
}}>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#f8fafc', marginBottom: '16px' }}>
📊 World Statistics
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Capacity</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>
{vrchat.instance.userCount}/{vrchat.instance.maxUsers}
</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Visits</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.world.visits.toLocaleString()}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Favorites</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.world.favorites}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Region</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.instance.region}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Uptime</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.instance.uptime}</span>
</div>
</div>
</div>
{/* Udon Scripts */}
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '24px'
}}>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#f8fafc', marginBottom: '16px' }}>
⚡ Udon Scripts
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Active Scripts</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.udon.scripts}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Events</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.udon.events}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Variables</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.udon.variables}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Networks</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.udon.networks}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Interactions</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.udon.interactions}</span>
</div>
</div>
</div>
{/* World Actions */}
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '24px'
}}>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#f8fafc', marginBottom: '16px' }}>
🎮 World Actions
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<button style={{
padding: '10px 16px',
backgroundColor: '#10b981',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '12px',
cursor: 'pointer'
}}>
🚪 Reset Instance
</button>
<button style={{
padding: '10px 16px',
backgroundColor: '#3b82f6',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '12px',
cursor: 'pointer'
}}>
👥 Invite Friends
</button>
<button style={{
padding: '10px 16px',
backgroundColor: '#f59e0b',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '12px',
cursor: 'pointer'
}}>
⭐ Favorite World
</button>
</div>
</div>
</div>
</div>
)}
{activeTab === 'avatars' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<h3 style={{ fontSize: '20px', fontWeight: '600', color: '#f8fafc' }}>Avatar Management</h3>
<button style={{
padding: '8px 16px',
backgroundColor: '#10b981',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
cursor: 'pointer'
}}>
➕ Upload Avatar
</button>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
{vrchat.avatars.map(avatar => (
<div key={avatar.id} style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: selectedAvatar === avatar.name ? '2px solid #8b5cf6' : '1px solid #334155',
padding: '20px',
cursor: 'pointer'
}}
onClick={() => changeAvatar(avatar.id)}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
<div style={{
width: '40px',
height: '40px',
backgroundColor: '#8b5cf6',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
🤖
</div>
<div>
<h4 style={{ fontSize: '16px', fontWeight: '600', color: '#f8fafc' }}>
{avatar.name}
</h4>
<p style={{ fontSize: '12px', color: '#94a3b8' }}>
{avatar.platform} • ⭐ {avatar.favorites} favorites
</p>
</div>
</div>
<div style={{ display: 'flex', gap: '8px' }}>
<button style={{
flex: 1,
padding: '6px 12px',
backgroundColor: selectedAvatar === avatar.name ? '#8b5cf6' : '#374151',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '11px',
cursor: 'pointer'
}}>
{selectedAvatar === avatar.name ? 'Active' : 'Switch To'}
</button>
<button style={{
padding: '6px 12px',
backgroundColor: '#6b7280',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '11px',
cursor: 'pointer'
}}>
⚙️ Edit
</button>
</div>
</div>
))}
</div>
</div>
)}
{activeTab === 'social' && (
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 300px',
gap: '24px'
}}>
{/* Social Feed */}
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '24px'
}}>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#f8fafc', marginBottom: '16px' }}>
👥 Social Activity
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
<div style={{
padding: '12px',
backgroundColor: '#0f172a',
borderRadius: '6px'
}}>
<div style={{ fontSize: '12px', color: '#3b82f6', marginBottom: '4px' }}>Alice joined your world</div>
<div style={{ fontSize: '10px', color: '#64748b' }}>2 minutes ago</div>
</div>
<div style={{
padding: '12px',
backgroundColor: '#0f172a',
borderRadius: '6px'
}}>
<div style={{ fontSize: '12px', color: '#10b981', marginBottom: '4px' }}>Bob favorited your world</div>
<div style={{ fontSize: '10px', color: '#64748b' }}>5 minutes ago</div>
</div>
<div style={{
padding: '12px',
backgroundColor: '#0f172a',
borderRadius: '6px'
}}>
<div style={{ fontSize: '12px', color: '#f59e0b', marginBottom: '4px' }}>New friend request from Charlie</div>
<div style={{ fontSize: '10px', color: '#64748b' }}>10 minutes ago</div>
</div>
</div>
</div>
{/* Social Stats */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
{/* Launch Controls */}
<LaunchControls
appId="vrchat"
appName="VRChat"
onStatusChange={(running) => {
// Update UI based on app status if needed
}}
/>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px'
}}>
<h4 style={{ fontSize: '16px', fontWeight: '600', color: '#f8fafc', marginBottom: '12px' }}>
👥 Social Network
</h4>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Friends</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.social.friends}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Requests</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.social.friendRequests}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Groups</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.social.groups}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>Blocked</span>
<span style={{ color: '#f8fafc', fontSize: '12px' }}>{vrchat.social.blocked}</span>
</div>
</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px'
}}>
<h4 style={{ fontSize: '16px', fontWeight: '600', color: '#f8fafc', marginBottom: '12px' }}>
🔔 Notifications
</h4>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f59e0b', marginBottom: '4px' }}>
{vrchat.social.notifications}
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>Unread notifications</div>
</div>
</div>
</div>
)}
{activeTab === 'performance' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
<h3 style={{ fontSize: '20px', fontWeight: '600', color: '#f8fafc' }}>Performance Metrics</h3>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: '16px'
}}>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#10b981', marginBottom: '4px' }}>
{vrchat.performance.fps}
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>FPS</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#3b82f6', marginBottom: '4px' }}>
{vrchat.performance.ping}ms
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>Ping</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f59e0b', marginBottom: '4px' }}>
{vrchat.performance.packetLoss}%
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>Packet Loss</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#8b5cf6', marginBottom: '4px' }}>
{vrchat.performance.cpuUsage}%
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>CPU Usage</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ec4899', marginBottom: '4px' }}>
{vrchat.performance.gpuUsage}%
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>GPU Usage</div>
</div>
<div style={{
backgroundColor: '#1e293b',
borderRadius: '12px',
border: '1px solid #334155',
padding: '20px',
textAlign: 'center'
}}>
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#06b6d4', marginBottom: '4px' }}>
{vrchat.performance.memoryUsage}GB
</div>
<div style={{ fontSize: '12px', color: '#94a3b8' }}>Memory Usage</div>
</div>
</div>
</div>
)}
</div>
</div>
)
}
