Device & Health UI Panels
Relevant source files
The following files were used as context for generating this wiki page:
The Device and Health UI Panels serve as the primary monitoring and management interfaces within Keynobi. These components provide developers with real-time visibility into the state of the Android development environment, connected physical hardware, and virtual emulators. The system is designed to identify environment misconfigurations (such as missing SDKs or incorrect Java paths) and provide actionable fixes to ensure a seamless development workflow.
The Device management system tracks connected ADB devices and provides lifecycle controls for Android Virtual Devices (AVDs), including launching, stopping, wiping, and deleting. Simultaneously, the Health system aggregates data from reactive stores and active system checks to provide an overall "operational" status displayed prominently in the application's status bar.
Device Management System
The device management system is implemented through two primary UI components: the DeviceSidebar and the DevicePanel. These components interact with the device.store.ts to reflect the current state of connected hardware and available emulators.
Architecture and Data Flow
The system utilizes a polling and event-based architecture to maintain synchronicity with the underlying Android Debug Bridge (ADB).
The diagram shows the flow of device management actions from the UI through the Tauri IPC bridge to the Rust backend, ultimately updating the reactive store.
Sources: src/components/device/DeviceSidebar.tsx:32-41, src/components/device/DevicePanel.tsx:55-68
Key Device Components
| Component | Description | Source |
|---|---|---|
DeviceSidebar | A persistent right-hand sidebar that can be expanded or collapsed. Displays a rail of status icons when collapsed. | src/components/device/DeviceSidebar.tsx:22-30 |
DevicePanel | A comprehensive management view used in full-width tabs or popovers. | src/components/device/DevicePanel.tsx:30-35 |
ConnectedDeviceRow | Represents a physical or online emulator device with status indicators (Online, Offline, Unauthorized). | src/components/device/DeviceSidebar.tsx:298-310 |
AvdRow | Displays installed virtual devices with controls for Launch, Stop, Wipe, and Delete. | src/components/device/DeviceSidebar.tsx:415-430 |
Device Lifecycle Actions
Developers can perform several operations directly from the UI:
- Launch/Stop: Initiates or terminates an emulator instance via
launchAvdandstopAvdAPI calls. Sources: src/components/device/DeviceSidebar.tsx:75-87, src/components/device/DeviceSidebar.tsx:89-97 - Wipe Data: Erases user data for a specific AVD before restarting it. Sources: src/components/device/DeviceSidebar.tsx:119-132
- Selection: Users can "pick" a device (set the active serial) for builds and logcat streaming. Sources: src/components/device/DeviceSidebar.tsx:305
Health Center & Environment Checks
The Health Center provides a centralized diagnostic hub. It categorizes checks into "Environment" (tools like SDK/Java), "Project" (Gradle specific), and "System" (filesystem and app data).
Health State Store
The health system maintains a HealthStoreState that tracks the systemReport (generated by the Rust backend), the running status of checks, and a timestamp of the last check.
The sequence shows the asynchronous process of triggering and resolving health checks across the IPC boundary.
Sources: src/stores/health.store.ts:46-72
Environment Diagnostic Categories
The health store derives specific HealthCheck objects by combining backend reports with current application settings.
| Check ID | Focus | Source |
|---|---|---|
android-sdk | Validates ANDROID_HOME configuration and path existence. | src/stores/health.store.ts:98-121 |
java | Checks for Java executable and validates version compatibility for Gradle. | src/stores/health.store.ts:182-205 |
adb | Ensures Android Debug Bridge is found within the platform-tools. | src/stores/health.store.ts:123-146 |
studio-command | Checks if the studio CLI is on the system PATH to enable editor integration. | src/stores/health.store.ts:165-180 |
app-dir | Verifies that ~/.keynobi/ is writable for logs and internal data. | src/stores/health.store.ts:207-221 |
Actionable Fixes
Many health checks provide a fix object. When a check fails (e.g., SDK not found), the UI renders a button that allows the user to perform a corrective action, such as opening the Settings Panel to configure the correct path.
Sources: src/components/health/HealthPanel.tsx:106-125, src/stores/health.store.ts:88-92
UI Integration and Status Indicators
Health and device states are integrated into the primary application layout through the StatusBar and OnboardingWizard.
Status Bar Indicators
The StatusBar displays a summarized view of the system health using a color-coded dot and a check counter.
- Green (ok): All system checks are passing.
- Yellow (warning): Some checks are loading or require attention.
- Red (error): A critical check (like missing Java) has failed.
Sources: src/components/layout/StatusBar.tsx:34-45, src/stores/health.store.ts:227-234
Onboarding Wizard
The OnboardingWizard utilizes health checks during the initial setup to guide users through environment configuration.
The onboarding flow ensures that essential health checks (SDK/JDK) are addressed before the user enters the main application interface.
Sources: src/components/onboarding/OnboardingWizard.tsx:132-158, src/components/onboarding/OnboardingWizard.tsx:241-272
Logcat Buffer and Monitoring
A specialized section of the health monitoring system tracks the Logcat ring buffer usage. If the buffer usage exceeds 80%, a warning is displayed in the Health Panel to alert the user that oldest entries may be lost.
Sources: src/components/health/HealthPanel.tsx:505-546
Summary
The Device and Health UI Panels are critical for maintaining a functional Android development environment within Keynobi. By combining reactive state management with active system probing, the application provides a transparent view of tool dependencies and device status, enabling developers to resolve environmental issues without leaving the application.