feat: Add comprehensive read-only Bevy Inspector with remote inspection capabilities

[jbuehler23]

(Almost) A read-only bevy editor!

• Added a new dedicated bevy_editor crate with modular architecture for real-time entity and component inspection
• Implemented remote connection system using bevy_remote protocol for inspecting external Bevy applications
• Created comprehensive UI widget system including ScrollViewBuilder, CoreScrollArea, ExpansionButton, BasicPanel, and ScrollableContainer
• Developed entity list and component inspector panels with expandable, hierarchical component viewing
• Established theming system with EditorTheme struct for consistent visual styling
• Added intelligent component formatting with specialized support for Bevy types (Vec2/Vec3/Quat, Colors, Entity IDs)
• Implemented mouse wheel scrolling and keyboard shortcuts (E/T/C keys) for enhanced navigation
• Created HTTP client with automatic connection management and status monitoring
• Added comprehensive documentation and examples for modular editor usage

Objective

This PR addresses the need for a robust, standalone entity inspector and editor for Bevy applications that can connect to remote processes via bevy_remote.

• Remote inspection capabilities for debugging live applications
• Modular architecture allowing individual components to be used separately
• Modern UI with responsive design and intuitive controls

Solution

The solution introduces a new bevy_editor crate with a modular architecture:

Core Architecture

• EditorPlugin: Main plugin that orchestrates all editor functionality
• Panel System: Individual UI panels (EntityListPlugin, ComponentInspectorPlugin) that can be used independently
• Widget Library: Reusable UI components with bevy_core_widgets integration
• Remote Client: HTTP client implementing the bevy_remote protocol
• Formatting System: Intelligent component data formatting and display
• Theme System: Consistent styling across all editor components

Key Features Implemented

1. Remote Connection System (src/remote/):

   • HTTP client with automatic connection management
   • Support for bevy_remote protocol
   • Real-time connection status monitoring
   • Automatic reconnection on connection loss

2. UI Widget Library (src/widgets/):

   • ScrollViewBuilder for high-level scrollable containers
   • CoreScrollArea for low-level scroll implementations
   • ExpansionButton for collapsible content
   • BasicPanel for structured content areas
   • ScrollableContainer with mouse wheel support

3. Panel System (src/panels/):

   • EntityListPlugin: Entity browser with selection and filtering
   • ComponentInspectorPlugin: Detailed component viewer with hierarchical expansion

4. Component Formatting (src/formatting/):

   • Specialized formatting for Bevy types (Transform, Vec3, Color, etc.)
   • Hierarchical field breakdown for complex components
   • Smart type recognition and display

5. Theme System (src/themes/):

   • EditorTheme struct for consistent styling
   • Dark theme with professional appearance
   • Integration with bevy_feathers compatibility

Testing

Manual Testing Performed

• Inspector connects successfully to remote bevy_remote servers
• Entity list displays and updates in real-time
• Component inspector shows hierarchical component data
• Mouse wheel scrolling works smoothly
• Keyboard shortcuts (E/T/C) function correctly
• Connection status indicators update appropriately
• UI scales properly on different window sizes

Testing Instructions for Reviewers

1. Basic Inspector Test:

   cargo run --example inspector --package bevy_editor

2. Remote Connection Test:

   # Terminal 1: Start a server with bevy_remote
   cargo run --example server --features bevy_remote
   
   # Terminal 2: Start the inspector
   cargo run --example inspector --package bevy_editor

3. Individual Component Test:

   // Test individual panels
   use bevy_editor::panels::EntityListPlugin;
   App::new().add_plugins(EntityListPlugin).run();

Platforms Tested

• macOS (primary development)
• Windows

Areas Needing Additional Testing

• Network connectivity edge cases
• Large entity counts (1000+ entities)
• Complex nested component structures
• Multi-window scenarios

---

Showcase

The new Bevy Editor provides a professional entity inspection experience similar to other game engines:

Key Features Demonstrated

Two-Panel Layout: Clean entity list on the left, detailed component inspector on the right

• Entity browser with real-time updates
• Hierarchical component viewing with expand/collapse
• Connection status indicator
• Smooth mouse wheel scrolling

Smart Component Formatting:

// Example of formatted component display
[bevy_transform] Transform
  ▼ translation: (0.00, 1.37, 0.00)
    x: 0.000
    y: 1.367  
    z: 0.000
  ▼ rotation: (0.00, 0.00, 0.00, 1.00)
  ▼ scale: (1.00, 1.00, 1.00)

[bevy_camera] Camera  
  ▼ projection: Perspective
  ▼ viewport: Some(Viewport)

[server] Cube
  value: Entity(1)

Modular Usage:

// Use the complete editor
use bevy_editor::prelude::*;
App::new().add_plugins(EditorPlugin).run();

// Or individual components
use bevy_editor::panels::{EntityListPlugin, ComponentInspectorPlugin};
use bevy_editor::widgets::WidgetsPlugin;
App::new()
    .add_plugins((EntityListPlugin, ComponentInspectorPlugin, WidgetsPlugin))
    .run();

Remote Connection:

// Automatic connection to bevy_remote servers
// No manual configuration needed - connects to localhost:15702 by default
// Displays live entity and component data from remote applications

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

[IQuick143]

Added X-Controversial just because of new crate.

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

[jbuehler23]

Added X-Controversial just because of new crate.

In all honesty, it's likely this gets moved to bevy_dev_tools. Just haven't had the time yet!

[Zeophlite]

Why aren't src/widgets/ in bevy_core_widgets ?

[jbuehler23]

Why aren't src/widgets/ in bevy_core_widgets ?

Only because I was hoping to get some feedback on what was worth actually updstreaming outside of the inspector really. It's entirely possible not all of these widgets would have a use outside of the inspector/editor - though a lot of them probably would!

[DaRAGingLunatic]

Awesome work. Keep it up. I'm kind of newish at coding and absolutely have only very basic understanding of remote stuff/server/client, however I was wondering if you can answer my question? How come there is the use of JSON instead of RON? I thought RONs are meant to be more flexible than JSON and are able to hold more information, data structure wise? And since this is all done in Rust, why not use a Rust format instead of a JavaScript format?

Also, will the use of JSON here prevent others from using RON format? Or do we somehow serialize/deserialize the RON information into JSON before transmitting the information from client to server and vice versa?

Thank you for your time.

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.