feat: add socket control and temperature humidity modules (#7)

## Summary - **Smart Socket Module**: - Implemented `SocketUiState` and `SocketViewModel` with support for querying power state, toggle control, duplicate click debouncing, and state confirmation timestamping. - Implemented Material 3 responsive `SocketScreen` with power indicator badge, toggle action, explicit on/off buttons, offline banner, and error handling. - **Temperature & Humidity Module**: - Implemented `TemperatureHumidityUiState` and `TemperatureHumidityViewModel` for read-only environmental telemetry. - Implemented `TemperatureHumidityScreen` featuring distinct temperature and humidity cards, read-only notice, no-data placeholder, and pull-to-refresh actions. - **Common & Infrastructure**: - Added `UiText` and `DomainErrorMapper` for localizing domain errors (`DomainError`). - Added navigation graph extensions (`deviceDetailGraph`) in `DeviceDetailNavigation.kt` and wired into `ABoxManagerApp.kt`. - Added `ReleaseModule` for Hilt dependency injection in release builds. - Added full English and Simplified Chinese resource translations in `values/strings.xml` and `values-zh-rCN/strings.xml`. - **Testing**: - Added `SocketViewModelTest` and `TemperatureHumidityViewModelTest` covering normal operations, offline states, error mapping, and refresh scenarios. ## Test Plan - [x] Run `./gradlew test` (all modules passed) - [x] Run `./gradlew :android:app:testDebugUnitTest` (passed) - [x] Run `./gradlew assembleDebug` (build successful) ?? Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: KremeCN <3265494849@qq.com> Reviewed-on: #7 Co-authored-by: Aurum <aurum_197@outlook.com>
2026-08-25 15:41:34 +08:00
parent 0c783ca2f4
commit 30d6d39597
16 changed files with 1823 additions and 0 deletions
@@ -19,6 +19,7 @@ import androidx.navigation.navArgument
 import com.flagship.abox.manager.designsystem.ABoxLoadingIndicator
 import com.flagship.abox.manager.designsystem.ABoxSurface
 import com.flagship.abox.manager.designsystem.ABoxTheme
+import com.flagship.abox.manager.domain.DeviceName
 import com.flagship.abox.manager.domain.ProviderProfile
 import com.flagship.abox.manager.domain.Username
 import com.flagship.abox.manager.infrared.hub.InfraredHubRoute
@@ -27,6 +28,9 @@ import com.flagship.abox.manager.infrared.ui.InfraredControlRoute
 import com.flagship.abox.manager.ui.devicecontrollist.DeviceListScreen
 import com.flagship.abox.manager.ui.login.LoginRoute
 import com.flagship.abox.manager.ui.login.LoginViewModel
+import com.flagship.abox.manager.ui.navigation.deviceDetailGraph
+import com.flagship.abox.manager.ui.navigation.navigateToSocket
+import com.flagship.abox.manager.ui.navigation.navigateToTemperatureHumidity
 import com.flagship.abox.manager.ui.provider.ProviderSelectionRoute
 import com.flagship.abox.manager.ui.session.AppSessionUiState
 import com.flagship.abox.manager.ui.session.AppSessionViewModel
@@ -103,6 +107,18 @@ private fun AuthenticatedNavHost(
                devicesSlot = {
                    val encodedProfileId = android.net.Uri.encode(profile.id.value)
                    DeviceListScreen(
+                        onSocketClick = {
+                            navController.navigateToSocket(
+                                profileId = profile.id,
+                                deviceName = DeviceName("Zigbee插座控制器"),
+                            )
+                        },
+                        onTemperatureHumidityClick = {
+                            navController.navigateToTemperatureHumidity(
+                                profileId = profile.id,
+                                deviceName = DeviceName("温湿度传感器"),
+                            )
+                        },
                        onInfraredClick = {
                            navController.navigate("infrared_hub/$encodedProfileId")
                        },
@@ -110,6 +126,9 @@ private fun AuthenticatedNavHost(
                },
            )
        }
+        deviceDetailGraph(
+            onBackClick = navController::popBackStack,
+        )
        composable(
            route = "infrared_hub/{profileId}",
            arguments = listOf(
@@ -0,0 +1,25 @@
+package com.flagship.abox.manager.ui.common
+
+import com.flagship.abox.manager.R
+import com.flagship.abox.manager.domain.DomainError
+
+object DomainErrorMapper {
+    fun map(error: DomainError): UiText = when (error) {
+        is DomainError.Authentication -> UiText.StringResource(R.string.error_authentication)
+        is DomainError.TokenInvalid -> UiText.StringResource(R.string.error_token_invalid)
+        is DomainError.Network -> UiText.StringResource(R.string.error_network)
+        is DomainError.DeviceNotFound -> UiText.StringResource(R.string.error_device_not_found)
+        is DomainError.DeviceOffline -> UiText.StringResource(R.string.error_device_offline)
+        is DomainError.InvalidRequest -> UiText.StringResource(R.string.error_invalid_request)
+        is DomainError.OperationFailed -> UiText.StringResource(R.string.error_operation_failed)
+        is DomainError.NoData -> UiText.StringResource(R.string.error_no_data)
+        is DomainError.Unknown -> {
+            val detail = error.detail
+            if (!detail.isNullOrBlank()) {
+                UiText.DynamicString(detail)
+            } else {
+                UiText.StringResource(R.string.error_unknown)
+            }
+        }
+    }
+}
@@ -0,0 +1,36 @@
+package com.flagship.abox.manager.ui.common
+
+import android.content.Context
+import androidx.annotation.StringRes
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+
+sealed interface UiText {
+    data class DynamicString(val value: String) : UiText
+
+    data class StringResource(
+        @StringRes val resId: Int,
+        val args: List<Any> = emptyList(),
+    ) : UiText {
+        constructor(@StringRes resId: Int, vararg args: Any) : this(resId, args.toList())
+    }
+
+    @Composable
+    fun asString(): String = when (this) {
+        is DynamicString -> value
+        is StringResource -> if (args.isEmpty()) {
+            stringResource(resId)
+        } else {
+            stringResource(resId, *args.toTypedArray())
+        }
+    }
+
+    fun asString(context: Context): String = when (this) {
+        is DynamicString -> value
+        is StringResource -> if (args.isEmpty()) {
+            context.getString(resId)
+        } else {
+            context.getString(resId, *args.toTypedArray())
+        }
+    }
+}
@@ -0,0 +1,59 @@
+package com.flagship.abox.manager.ui.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavType
+import androidx.navigation.compose.composable
+import androidx.navigation.navArgument
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.ProviderProfileId
+import com.flagship.abox.manager.ui.socket.SocketRoute
+import com.flagship.abox.manager.ui.temperaturehumidity.TemperatureHumidityRoute
+import java.net.URLEncoder
+import java.nio.charset.StandardCharsets
+
+object DeviceDetailRoutes {
+    const val SOCKET_PATTERN = "device/socket/{profileId}/{deviceName}"
+    const val TH_PATTERN = "device/th/{profileId}/{deviceName}"
+
+    fun socketRoute(profileId: ProviderProfileId, deviceName: DeviceName): String =
+        "device/socket/${encode(profileId.value)}/${encode(deviceName.value)}"
+
+    fun temperatureHumidityRoute(profileId: ProviderProfileId, deviceName: DeviceName): String =
+        "device/th/${encode(profileId.value)}/${encode(deviceName.value)}"
+
+    private fun encode(value: String): String =
+        URLEncoder.encode(value, StandardCharsets.UTF_8.name())
+}
+
+fun NavController.navigateToSocket(profileId: ProviderProfileId, deviceName: DeviceName) {
+    navigate(DeviceDetailRoutes.socketRoute(profileId, deviceName))
+}
+
+fun NavController.navigateToTemperatureHumidity(profileId: ProviderProfileId, deviceName: DeviceName) {
+    navigate(DeviceDetailRoutes.temperatureHumidityRoute(profileId, deviceName))
+}
+
+fun NavGraphBuilder.deviceDetailGraph(
+    onBackClick: () -> Unit,
+) {
+    composable(
+        route = DeviceDetailRoutes.SOCKET_PATTERN,
+        arguments = listOf(
+            navArgument("profileId") { type = NavType.StringType },
+            navArgument("deviceName") { type = NavType.StringType },
+        ),
+    ) {
+        SocketRoute(onBackClick = onBackClick)
+    }
+
+    composable(
+        route = DeviceDetailRoutes.TH_PATTERN,
+        arguments = listOf(
+            navArgument("profileId") { type = NavType.StringType },
+            navArgument("deviceName") { type = NavType.StringType },
+        ),
+    ) {
+        TemperatureHumidityRoute(onBackClick = onBackClick)
+    }
+}
@@ -0,0 +1,385 @@
+package com.flagship.abox.manager.ui.socket
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.flagship.abox.manager.R
+import com.flagship.abox.manager.designsystem.ABoxButton
+import com.flagship.abox.manager.designsystem.ABoxLoadingIndicator
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.SocketPowerState
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+
+@Composable
+fun SocketRoute(
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    viewModel: SocketViewModel = hiltViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    SocketScreen(
+        state = state,
+        onEvent = viewModel::onEvent,
+        onBackClick = onBackClick,
+        modifier = modifier,
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SocketScreen(
+    state: SocketUiState,
+    onEvent: (SocketUiEvent) -> Unit,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val scrollState = rememberScrollState()
+    var showEditNameDialog by remember { mutableStateOf(false) }
+
+    Scaffold(
+        modifier = modifier.fillMaxSize(),
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        text = state.deviceName?.value ?: stringResource(R.string.socket_title),
+                        style = MaterialTheme.typography.titleLarge,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = onBackClick) {
+                        Text("<", style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold)
+                    }
+                },
+                actions = {
+                    IconButton(
+                        onClick = { showEditNameDialog = true },
+                        enabled = !state.isLoading && !state.isOperating,
+                    ) {
+                        Text("✎", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
+                    }
+                    IconButton(
+                        onClick = { onEvent(SocketUiEvent.Refresh) },
+                        enabled = !state.isLoading && !state.isOperating,
+                    ) {
+                        Text("↻", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
+                    }
+                },
+            )
+        },
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(horizontal = 24.dp, vertical = 16.dp)
+                .verticalScroll(scrollState),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            if (state.isOffline) {
+                OfflineBanner(
+                    onRetry = { onEvent(SocketUiEvent.Refresh) },
+                    modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+                )
+            }
+
+            state.errorMessage?.let { errorText ->
+                ErrorBanner(
+                    message = errorText.asString(),
+                    onDismiss = { onEvent(SocketUiEvent.ClearError) },
+                    modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+                )
+            }
+
+            // Central Status Card
+            Card(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 16.dp),
+                colors = CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surfaceVariant,
+                ),
+                shape = MaterialTheme.shapes.large,
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(32.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center,
+                ) {
+                    PowerIndicatorBadge(
+                        powerState = state.powerState,
+                        isOffline = state.isOffline,
+                        isLoading = state.isLoading,
+                    )
+
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    Text(
+                        text = stringResource(R.string.socket_status_label),
+                        style = MaterialTheme.typography.labelMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+
+                    Text(
+                        text = when {
+                            state.isOffline -> stringResource(R.string.socket_status_offline)
+                            state.powerState == SocketPowerState.ON -> stringResource(R.string.socket_status_on)
+                            state.powerState == SocketPowerState.OFF -> stringResource(R.string.socket_status_off)
+                            else -> stringResource(R.string.socket_status_unknown)
+                        },
+                        style = MaterialTheme.typography.headlineMedium,
+                        fontWeight = FontWeight.Bold,
+                        color = when {
+                            state.isOffline -> MaterialTheme.colorScheme.error
+                            state.powerState == SocketPowerState.ON -> MaterialTheme.colorScheme.primary
+                            else -> MaterialTheme.colorScheme.onSurface
+                        },
+                        modifier = Modifier.padding(top = 4.dp),
+                    )
+
+                    state.lastConfirmedTimeMillis?.let { timeMillis ->
+                        val formattedTime = SimpleDateFormat("HH:mm:ss", Locale.getDefault()).format(Date(timeMillis))
+                        Text(
+                            text = stringResource(R.string.socket_confirmed_at, formattedTime),
+                            style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.8f),
+                            modifier = Modifier.padding(top = 8.dp),
+                        )
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            // Main Toggle Action Button
+            ABoxButton(
+                onClick = { onEvent(SocketUiEvent.TogglePower) },
+                enabled = state.isActionEnabled,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(56.dp),
+            ) {
+                if (state.isOperating) {
+                    ABoxLoadingIndicator(modifier = Modifier.size(24.dp))
+                    Spacer(modifier = Modifier.width(12.dp))
+                    Text(stringResource(R.string.socket_operating_label))
+                } else {
+                    Text(
+                        text = if (state.isPowerOn) {
+                            stringResource(R.string.socket_action_turn_off)
+                        } else {
+                            stringResource(R.string.socket_action_turn_on)
+                        },
+                        style = MaterialTheme.typography.titleMedium,
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.height(12.dp))
+
+            // Dedicated Segmented Action Buttons
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+            ) {
+                OutlinedButton(
+                    onClick = { onEvent(SocketUiEvent.SetPower(SocketPowerState.ON)) },
+                    enabled = state.isActionEnabled && state.powerState != SocketPowerState.ON,
+                    modifier = Modifier.weight(1f).height(48.dp),
+                ) {
+                    Text(stringResource(R.string.socket_action_turn_on))
+                }
+
+                OutlinedButton(
+                    onClick = { onEvent(SocketUiEvent.SetPower(SocketPowerState.OFF)) },
+                    enabled = state.isActionEnabled && state.powerState != SocketPowerState.OFF,
+                    modifier = Modifier.weight(1f).height(48.dp),
+                ) {
+                    Text(stringResource(R.string.socket_action_turn_off))
+                }
+            }
+        }
+    }
+
+    if (showEditNameDialog) {
+        var inputName by remember(state.deviceName) { mutableStateOf(state.deviceName?.value.orEmpty()) }
+        AlertDialog(
+            onDismissRequest = { showEditNameDialog = false },
+            title = { Text(stringResource(R.string.dialog_edit_device_name_title)) },
+            text = {
+                OutlinedTextField(
+                    value = inputName,
+                    onValueChange = { inputName = it },
+                    label = { Text(stringResource(R.string.dialog_edit_device_name_hint)) },
+                    singleLine = true,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        val trimmed = inputName.trim()
+                        if (trimmed.isNotBlank()) {
+                            onEvent(SocketUiEvent.ChangeDeviceName(DeviceName(trimmed)))
+                        }
+                        showEditNameDialog = false
+                    },
+                    enabled = inputName.isNotBlank(),
+                ) {
+                    Text(stringResource(R.string.action_confirm))
+                }
+            },
+            dismissButton = {
+                TextButton(onClick = { showEditNameDialog = false }) {
+                    Text(stringResource(R.string.action_cancel))
+                }
+            },
+        )
+    }
+}
+
+@Composable
+private fun PowerIndicatorBadge(
+    powerState: SocketPowerState?,
+    isOffline: Boolean,
+    isLoading: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    val indicatorColor = when {
+        isOffline -> MaterialTheme.colorScheme.error
+        powerState == SocketPowerState.ON -> MaterialTheme.colorScheme.primary
+        powerState == SocketPowerState.OFF -> MaterialTheme.colorScheme.outline
+        else -> MaterialTheme.colorScheme.outlineVariant
+    }
+
+    Box(
+        modifier = modifier
+            .size(96.dp)
+            .clip(CircleShape)
+            .background(indicatorColor.copy(alpha = 0.15f))
+            .border(3.dp, indicatorColor, CircleShape),
+        contentAlignment = Alignment.Center,
+    ) {
+        if (isLoading) {
+            ABoxLoadingIndicator(modifier = Modifier.size(36.dp))
+        } else {
+            Text(
+                text = if (powerState == SocketPowerState.ON) "⚡" else "○",
+                style = MaterialTheme.typography.headlineLarge,
+                color = indicatorColor,
+            )
+        }
+    }
+}
+
+@Composable
+private fun OfflineBanner(
+    onRetry: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.errorContainer,
+            contentColor = MaterialTheme.colorScheme.onErrorContainer,
+        ),
+        shape = MaterialTheme.shapes.medium,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(
+                text = stringResource(R.string.status_device_offline_banner),
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.weight(1f),
+            )
+            TextButton(onClick = onRetry) {
+                Text(stringResource(R.string.action_retry))
+            }
+        }
+    }
+}
+
+@Composable
+private fun ErrorBanner(
+    message: String,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.errorContainer.copy(alpha = 0.85f),
+            contentColor = MaterialTheme.colorScheme.onErrorContainer,
+        ),
+        shape = MaterialTheme.shapes.medium,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 10.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(
+                text = message,
+                style = MaterialTheme.typography.bodySmall,
+                modifier = Modifier.weight(1f),
+            )
+            TextButton(onClick = onDismiss) {
+                Text("✕")
+            }
+        }
+    }
+}
@@ -0,0 +1,32 @@
+package com.flagship.abox.manager.ui.socket
+
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.ProviderProfileId
+import com.flagship.abox.manager.domain.SocketPowerState
+import com.flagship.abox.manager.ui.common.UiText
+
+data class SocketUiState(
+    val profileId: ProviderProfileId? = null,
+    val deviceName: DeviceName? = null,
+    val powerState: SocketPowerState? = null,
+    val isLoading: Boolean = false,
+    val isOperating: Boolean = false,
+    val isOffline: Boolean = false,
+    val errorMessage: UiText? = null,
+    val lastConfirmedTimeMillis: Long? = null,
+) {
+    val isActionEnabled: Boolean
+        get() = !isLoading && !isOperating && !isOffline && profileId != null && deviceName != null
+
+    val isPowerOn: Boolean
+        get() = powerState == SocketPowerState.ON
+}
+
+sealed interface SocketUiEvent {
+    data class Initialize(val profileId: ProviderProfileId, val deviceName: DeviceName) : SocketUiEvent
+    data class ChangeDeviceName(val deviceName: DeviceName) : SocketUiEvent
+    data object Refresh : SocketUiEvent
+    data object TogglePower : SocketUiEvent
+    data class SetPower(val targetState: SocketPowerState) : SocketUiEvent
+    data object ClearError : SocketUiEvent
+}
@@ -0,0 +1,174 @@
+package com.flagship.abox.manager.ui.socket
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.DomainError
+import com.flagship.abox.manager.domain.DomainResult
+import com.flagship.abox.manager.domain.ProviderProfileId
+import com.flagship.abox.manager.domain.SocketGateway
+import com.flagship.abox.manager.domain.SocketPowerState
+import com.flagship.abox.manager.ui.common.DomainErrorMapper
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import java.net.URLDecoder
+import java.nio.charset.StandardCharsets
+import javax.inject.Inject
+
+@HiltViewModel
+class SocketViewModel @Inject constructor(
+    private val socketGateway: SocketGateway,
+    savedStateHandle: SavedStateHandle,
+) : ViewModel() {
+
+    private val _state = MutableStateFlow(SocketUiState())
+    val state: StateFlow<SocketUiState> = _state.asStateFlow()
+
+    init {
+        val profileIdString: String? = savedStateHandle.get<String>("profileId")?.let { decode(it) }
+        val deviceNameString: String? = savedStateHandle.get<String>("deviceName")?.let { decode(it) }
+
+        if (!profileIdString.isNullOrBlank() && !deviceNameString.isNullOrBlank()) {
+            onEvent(
+                SocketUiEvent.Initialize(
+                    profileId = ProviderProfileId(profileIdString),
+                    deviceName = DeviceName(deviceNameString),
+                ),
+            )
+        }
+    }
+
+    private fun decode(value: String): String = try {
+        URLDecoder.decode(value, StandardCharsets.UTF_8.name())
+    } catch (_: Exception) {
+        value
+    }
+
+    fun onEvent(event: SocketUiEvent) {
+        when (event) {
+            is SocketUiEvent.Initialize -> {
+                _state.update {
+                    it.copy(
+                        profileId = event.profileId,
+                        deviceName = event.deviceName,
+                    )
+                }
+                loadStatus()
+            }
+
+            is SocketUiEvent.ChangeDeviceName -> {
+                val trimmed = event.deviceName.value.trim()
+                if (trimmed.isNotBlank() && trimmed != _state.value.deviceName?.value) {
+                    _state.update {
+                        it.copy(
+                            deviceName = DeviceName(trimmed),
+                            powerState = null,
+                            errorMessage = null,
+                            lastConfirmedTimeMillis = null,
+                        )
+                    }
+                    loadStatus()
+                }
+            }
+
+            SocketUiEvent.Refresh -> {
+                loadStatus()
+            }
+
+            SocketUiEvent.TogglePower -> {
+                val currentState = _state.value
+                val targetState = if (currentState.isPowerOn) {
+                    SocketPowerState.OFF
+                } else {
+                    SocketPowerState.ON
+                }
+                setPower(targetState)
+            }
+
+            is SocketUiEvent.SetPower -> {
+                setPower(event.targetState)
+            }
+
+            SocketUiEvent.ClearError -> {
+                _state.update { it.copy(errorMessage = null) }
+            }
+        }
+    }
+
+    private fun loadStatus() {
+        val profileId = _state.value.profileId ?: return
+        val deviceName = _state.value.deviceName ?: return
+
+        viewModelScope.launch {
+            _state.update { it.copy(isLoading = true, errorMessage = null) }
+            when (val result = socketGateway.getStatus(profileId, deviceName)) {
+                is DomainResult.Success -> {
+                    _state.update {
+                        it.copy(
+                            powerState = result.value.powerState,
+                            isLoading = false,
+                            isOffline = false,
+                            errorMessage = null,
+                            lastConfirmedTimeMillis = System.currentTimeMillis(),
+                        )
+                    }
+                }
+
+                is DomainResult.Failure -> {
+                    val isOffline = result.error is DomainError.DeviceOffline
+                    _state.update {
+                        it.copy(
+                            isLoading = false,
+                            isOffline = isOffline,
+                            errorMessage = DomainErrorMapper.map(result.error),
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+    private fun setPower(targetState: SocketPowerState) {
+        val current = _state.value
+        val profileId = current.profileId ?: return
+        val deviceName = current.deviceName ?: return
+
+        // Prevent duplicate action if currently operating, loading or offline
+        if (current.isOperating || current.isLoading || current.isOffline) {
+            return
+        }
+
+        viewModelScope.launch {
+            _state.update { it.copy(isOperating = true, errorMessage = null) }
+            when (val result = socketGateway.setPower(profileId, deviceName, targetState)) {
+                is DomainResult.Success -> {
+                    _state.update {
+                        it.copy(
+                            powerState = result.value.powerState,
+                            isOperating = false,
+                            isOffline = false,
+                            errorMessage = null,
+                            lastConfirmedTimeMillis = System.currentTimeMillis(),
+                        )
+                    }
+                }
+
+                is DomainResult.Failure -> {
+                    val isOffline = result.error is DomainError.DeviceOffline
+                    _state.update {
+                        it.copy(
+                            isOperating = false,
+                            isOffline = isOffline,
+                            errorMessage = DomainErrorMapper.map(result.error),
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,442 @@
+package com.flagship.abox.manager.ui.temperaturehumidity
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.flagship.abox.manager.R
+import com.flagship.abox.manager.designsystem.ABoxButton
+import com.flagship.abox.manager.designsystem.ABoxLoadingIndicator
+import com.flagship.abox.manager.domain.DeviceName
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+
+@Composable
+fun TemperatureHumidityRoute(
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    viewModel: TemperatureHumidityViewModel = hiltViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    TemperatureHumidityScreen(
+        state = state,
+        onEvent = viewModel::onEvent,
+        onBackClick = onBackClick,
+        modifier = modifier,
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TemperatureHumidityScreen(
+    state: TemperatureHumidityUiState,
+    onEvent: (TemperatureHumidityUiEvent) -> Unit,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val scrollState = rememberScrollState()
+    var showEditNameDialog by remember { mutableStateOf(false) }
+
+    Scaffold(
+        modifier = modifier.fillMaxSize(),
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        text = state.deviceName?.value ?: stringResource(R.string.th_title),
+                        style = MaterialTheme.typography.titleLarge,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = onBackClick) {
+                        Text("<", style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold)
+                    }
+                },
+                actions = {
+                    IconButton(
+                        onClick = { showEditNameDialog = true },
+                        enabled = !state.isLoading && !state.isRefreshing,
+                    ) {
+                        Text("✎", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
+                    }
+                    IconButton(
+                        onClick = { onEvent(TemperatureHumidityUiEvent.Refresh) },
+                        enabled = !state.isLoading && !state.isRefreshing,
+                    ) {
+                        Text("↻", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
+                    }
+                },
+            )
+        },
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(horizontal = 24.dp, vertical = 16.dp)
+                .verticalScroll(scrollState),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            if (state.isOffline) {
+                OfflineBanner(
+                    onRetry = { onEvent(TemperatureHumidityUiEvent.Refresh) },
+                    modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+                )
+            }
+
+            state.errorMessage?.let { errorText ->
+                ErrorBanner(
+                    message = errorText.asString(),
+                    onDismiss = { onEvent(TemperatureHumidityUiEvent.ClearError) },
+                    modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+                )
+            }
+
+            if (state.isLoading && !state.hasValidData) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(200.dp),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        ABoxLoadingIndicator(modifier = Modifier.size(40.dp))
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Text(
+                            text = stringResource(R.string.status_loading),
+                            style = MaterialTheme.typography.bodyMedium,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                    }
+                }
+            } else if (state.hasNoData) {
+                NoDataCard(
+                    onRefresh = { onEvent(TemperatureHumidityUiEvent.Refresh) },
+                    modifier = Modifier.fillMaxWidth().padding(vertical = 16.dp),
+                )
+            } else {
+                // Telemetry Cards Row / Column
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 12.dp),
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    TelemetryMetricCard(
+                        title = stringResource(R.string.th_temperature_label),
+                        value = state.temperature ?: "--",
+                        unit = stringResource(R.string.th_unit_celsius),
+                        icon = "🌡️",
+                        modifier = Modifier.weight(1f),
+                    )
+
+                    TelemetryMetricCard(
+                        title = stringResource(R.string.th_humidity_label),
+                        value = state.humidity ?: "--",
+                        unit = stringResource(R.string.th_unit_percent),
+                        icon = "💧",
+                        modifier = Modifier.weight(1f),
+                    )
+                }
+
+                state.lastUpdatedTimeMillis?.let { timeMillis ->
+                    val formattedTime = SimpleDateFormat("HH:mm:ss", Locale.getDefault()).format(Date(timeMillis))
+                    Text(
+                        text = stringResource(R.string.th_last_updated, formattedTime),
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.8f),
+                        modifier = Modifier.padding(top = 8.dp, bottom = 16.dp),
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            // Read-Only Informational Card
+            Card(
+                modifier = Modifier.fillMaxWidth(),
+                colors = CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6f),
+                ),
+                shape = MaterialTheme.shapes.medium,
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                ) {
+                    Text(
+                        text = stringResource(R.string.th_read_only_notice),
+                        style = MaterialTheme.typography.titleSmall,
+                        fontWeight = FontWeight.SemiBold,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                    Text(
+                        text = stringResource(R.string.th_read_only_description),
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.85f),
+                        modifier = Modifier.padding(top = 4.dp),
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.height(24.dp))
+
+            // Refresh Button
+            ABoxButton(
+                onClick = { onEvent(TemperatureHumidityUiEvent.Refresh) },
+                enabled = !state.isLoading && !state.isRefreshing && state.profileId != null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(52.dp),
+            ) {
+                if (state.isRefreshing || state.isLoading) {
+                    ABoxLoadingIndicator(modifier = Modifier.size(22.dp))
+                    Spacer(modifier = Modifier.width(10.dp))
+                    Text(stringResource(R.string.status_loading))
+                } else {
+                    Text(
+                        text = stringResource(R.string.action_refresh),
+                        style = MaterialTheme.typography.titleMedium,
+                    )
+                }
+            }
+        }
+    }
+
+    if (showEditNameDialog) {
+        var inputName by remember(state.deviceName) { mutableStateOf(state.deviceName?.value.orEmpty()) }
+        AlertDialog(
+            onDismissRequest = { showEditNameDialog = false },
+            title = { Text(stringResource(R.string.dialog_edit_device_name_title)) },
+            text = {
+                OutlinedTextField(
+                    value = inputName,
+                    onValueChange = { inputName = it },
+                    label = { Text(stringResource(R.string.dialog_edit_device_name_hint)) },
+                    singleLine = true,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        val trimmed = inputName.trim()
+                        if (trimmed.isNotBlank()) {
+                            onEvent(TemperatureHumidityUiEvent.ChangeDeviceName(DeviceName(trimmed)))
+                        }
+                        showEditNameDialog = false
+                    },
+                    enabled = inputName.isNotBlank(),
+                ) {
+                    Text(stringResource(R.string.action_confirm))
+                }
+            },
+            dismissButton = {
+                TextButton(onClick = { showEditNameDialog = false }) {
+                    Text(stringResource(R.string.action_cancel))
+                }
+            },
+        )
+    }
+}
+
+@Composable
+private fun TelemetryMetricCard(
+    title: String,
+    value: String,
+    unit: String,
+    icon: String,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+        ),
+        shape = MaterialTheme.shapes.large,
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(20.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Text(
+                text = icon,
+                style = MaterialTheme.typography.headlineMedium,
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Text(
+                text = title,
+                style = MaterialTheme.typography.labelMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Row(
+                verticalAlignment = Alignment.Bottom,
+                horizontalArrangement = Arrangement.Center,
+            ) {
+                Text(
+                    text = value,
+                    style = MaterialTheme.typography.headlineLarge,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.primary,
+                )
+                if (value != "--") {
+                    Text(
+                        text = " $unit",
+                        style = MaterialTheme.typography.titleMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        modifier = Modifier.padding(bottom = 4.dp),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun NoDataCard(
+    onRefresh: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+        ),
+        shape = MaterialTheme.shapes.large,
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(28.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Text("📭", style = MaterialTheme.typography.displaySmall)
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                text = stringResource(R.string.th_no_data_title),
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.Bold,
+            )
+            Text(
+                text = stringResource(R.string.th_no_data_description),
+                style = MaterialTheme.typography.bodySmall,
+                textAlign = TextAlign.Center,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.padding(top = 6.dp, bottom = 16.dp),
+            )
+            TextButton(onClick = onRefresh) {
+                Text(stringResource(R.string.action_refresh))
+            }
+        }
+    }
+}
+
+@Composable
+private fun OfflineBanner(
+    onRetry: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.errorContainer,
+            contentColor = MaterialTheme.colorScheme.onErrorContainer,
+        ),
+        shape = MaterialTheme.shapes.medium,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(
+                text = stringResource(R.string.status_device_offline_banner),
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.weight(1f),
+            )
+            TextButton(onClick = onRetry) {
+                Text(stringResource(R.string.action_retry))
+            }
+        }
+    }
+}
+
+@Composable
+private fun ErrorBanner(
+    message: String,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.errorContainer.copy(alpha = 0.85f),
+            contentColor = MaterialTheme.colorScheme.onErrorContainer,
+        ),
+        shape = MaterialTheme.shapes.medium,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 10.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(
+                text = message,
+                style = MaterialTheme.typography.bodySmall,
+                modifier = Modifier.weight(1f),
+            )
+            TextButton(onClick = onDismiss) {
+                Text("✕")
+            }
+        }
+    }
+}
@@ -0,0 +1,34 @@
+package com.flagship.abox.manager.ui.temperaturehumidity
+
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.ProviderProfileId
+import com.flagship.abox.manager.ui.common.UiText
+
+data class TemperatureHumidityUiState(
+    val profileId: ProviderProfileId? = null,
+    val deviceName: DeviceName? = null,
+    val temperature: String? = null,
+    val humidity: String? = null,
+    val isLoading: Boolean = false,
+    val isRefreshing: Boolean = false,
+    val isOffline: Boolean = false,
+    val hasNoData: Boolean = false,
+    val errorMessage: UiText? = null,
+    val lastUpdatedTimeMillis: Long? = null,
+) {
+    val formattedTemperature: String
+        get() = if (temperature.isNullOrBlank()) "--" else "$temperature °C"
+
+    val formattedHumidity: String
+        get() = if (humidity.isNullOrBlank()) "--" else "$humidity %"
+
+    val hasValidData: Boolean
+        get() = !temperature.isNullOrBlank() || !humidity.isNullOrBlank()
+}
+
+sealed interface TemperatureHumidityUiEvent {
+    data class Initialize(val profileId: ProviderProfileId, val deviceName: DeviceName) : TemperatureHumidityUiEvent
+    data class ChangeDeviceName(val deviceName: DeviceName) : TemperatureHumidityUiEvent
+    data object Refresh : TemperatureHumidityUiEvent
+    data object ClearError : TemperatureHumidityUiEvent
+}
@@ -0,0 +1,135 @@
+package com.flagship.abox.manager.ui.temperaturehumidity
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.flagship.abox.manager.domain.DeviceName
+import com.flagship.abox.manager.domain.DomainError
+import com.flagship.abox.manager.domain.DomainResult
+import com.flagship.abox.manager.domain.ProviderProfileId
+import com.flagship.abox.manager.domain.TemperatureHumidityGateway
+import com.flagship.abox.manager.ui.common.DomainErrorMapper
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import java.net.URLDecoder
+import java.nio.charset.StandardCharsets
+import javax.inject.Inject
+
+@HiltViewModel
+class TemperatureHumidityViewModel @Inject constructor(
+    private val thGateway: TemperatureHumidityGateway,
+    savedStateHandle: SavedStateHandle,
+) : ViewModel() {
+
+    private val _state = MutableStateFlow(TemperatureHumidityUiState())
+    val state: StateFlow<TemperatureHumidityUiState> = _state.asStateFlow()
+
+    init {
+        val profileIdString: String? = savedStateHandle.get<String>("profileId")?.let { decode(it) }
+        val deviceNameString: String? = savedStateHandle.get<String>("deviceName")?.let { decode(it) }
+
+        if (!profileIdString.isNullOrBlank() && !deviceNameString.isNullOrBlank()) {
+            onEvent(
+                TemperatureHumidityUiEvent.Initialize(
+                    profileId = ProviderProfileId(profileIdString),
+                    deviceName = DeviceName(deviceNameString),
+                ),
+            )
+        }
+    }
+
+    private fun decode(value: String): String = try {
+        URLDecoder.decode(value, StandardCharsets.UTF_8.name())
+    } catch (_: Exception) {
+        value
+    }
+
+    fun onEvent(event: TemperatureHumidityUiEvent) {
+        when (event) {
+            is TemperatureHumidityUiEvent.Initialize -> {
+                _state.update {
+                    it.copy(
+                        profileId = event.profileId,
+                        deviceName = event.deviceName,
+                    )
+                }
+                loadReading(isRefresh = false)
+            }
+
+            is TemperatureHumidityUiEvent.ChangeDeviceName -> {
+                val trimmed = event.deviceName.value.trim()
+                if (trimmed.isNotBlank() && trimmed != _state.value.deviceName?.value) {
+                    _state.update {
+                        it.copy(
+                            deviceName = DeviceName(trimmed),
+                            temperature = null,
+                            humidity = null,
+                            hasNoData = false,
+                            errorMessage = null,
+                            lastUpdatedTimeMillis = null,
+                        )
+                    }
+                    loadReading(isRefresh = false)
+                }
+            }
+
+            TemperatureHumidityUiEvent.Refresh -> {
+                loadReading(isRefresh = true)
+            }
+
+            TemperatureHumidityUiEvent.ClearError -> {
+                _state.update { it.copy(errorMessage = null) }
+            }
+        }
+    }
+
+    private fun loadReading(isRefresh: Boolean) {
+        val profileId = _state.value.profileId ?: return
+        val deviceName = _state.value.deviceName ?: return
+
+        viewModelScope.launch {
+            if (isRefresh) {
+                _state.update { it.copy(isRefreshing = true, errorMessage = null) }
+            } else {
+                _state.update { it.copy(isLoading = true, errorMessage = null) }
+            }
+
+            when (val result = thGateway.getReading(profileId, deviceName)) {
+                is DomainResult.Success -> {
+                    val reading = result.value
+                    val isBlankData = reading.temperature.isBlank() && reading.humidity.isBlank()
+                    _state.update {
+                        it.copy(
+                            temperature = reading.temperature.takeIf { t -> t.isNotBlank() },
+                            humidity = reading.humidity.takeIf { h -> h.isNotBlank() },
+                            isLoading = false,
+                            isRefreshing = false,
+                            isOffline = false,
+                            hasNoData = isBlankData,
+                            errorMessage = null,
+                            lastUpdatedTimeMillis = System.currentTimeMillis(),
+                        )
+                    }
+                }
+
+                is DomainResult.Failure -> {
+                    val isOffline = result.error is DomainError.DeviceOffline
+                    val hasNoData = result.error is DomainError.NoData
+                    _state.update {
+                        it.copy(
+                            isLoading = false,
+                            isRefreshing = false,
+                            isOffline = isOffline,
+                            hasNoData = hasNoData,
+                            errorMessage = DomainErrorMapper.map(result.error),
+                        )
+                    }
+                }
+            }
+        }
+    }
+}