[Feature] Enhanced Status Bar with Packager Port and Device Indicator

[ConnorQi01]

Problem Statement

Currently, when debugging React Native applications in VS Code, developers lack visibility into:

• Which port the Metro packager is running on
• Which device/simulator is actively being debugged

This information is crucial for troubleshooting connection issues and managing multiple debug sessions.

Proposed Solution

Enhance the status bar to display:

1. Packager port number - Show the port (e.g., :8081) next to the packager status icon
2. Active device indicator - Display the current debug target device/simulator name

Implementation Details

1. Packager Port Display

• Modify PackagerStatusIndicator to accept and display port number
• Show port in both full and short display modes
• Clear port display when packager stops

2. Device Status Indicator

• Create new DeviceStatusIndicator singleton class
• Display device name with mobile icon during active debug sessions
• Automatically hide when debug session ends
• Integrate with app launcher to capture device information

Expected Behavior

Status Bar Display:

Before: $(debug-start) React Native Packager  $(debug-restart)
After:  $(debug-start) React Native Packager :8081  $(debug-restart)  $(device-mobile) Pixel_2(AVD)

Benefits

• Improved debugging transparency - Developers can instantly see connection details
• Faster troubleshooting - Port conflicts and device issues are immediately visible
• Better multi-device workflow - Clear indication of which device is active
• Enhanced developer experience - Reduces need to check terminal output

Technical Changes Required

Modified Files:

• src/common/packager.ts - Pass port to status indicator
• src/extension/packagerStatusIndicator.ts - Display port in status text
• src/extension/appLauncher.ts - Show device name on launch
• src/debugger/debugSessionBase.ts - Hide indicator on session end
• src/extension/generalMobilePlatform.ts - Expose device target accessor

New Files:

• src/extension/deviceStatusIndicator.ts - Device status indicator component

Testing Considerations

• Verify port display updates correctly when packager starts/stops
• Test device indicator with Android emulators and iOS simulators
• Ensure indicators hide appropriately when debug session ends
• Validate behavior with multiple workspace folders
• Check status bar layout with different display modes

Related Issues

This enhancement addresses common developer pain points around debugging visibility and complements existing packager status features.