refactor(#621): split ChatScreen.kt god file into focused composable components (#623)

Split the 2,267-line ChatScreen.kt into 11 single-purpose files under
ui/chat/components/, keeping ChatScreen.kt as a thin (~530 line)
entry compositor that delegates rendering to the new components.

Files extracted:
- ChatConnectionBanner.kt    — top banner (reconnecting/disconnected/auth-expired)
- ChatMessageList.kt         — message list + search bar overlay + empty state
- ChatComposer.kt            — input bar + attachment chips + slash dropdown
- ChatSearchBar.kt           — CompactSearchInput + SearchBarRow
- ChatDialogs.kt             — ClarifyDialog, SudoPromptDialog, SecretPromptDialog, ReloginDialog
- ChatIndicators.kt          — ThinkingIndicator, ReasoningIndicator, SubagentIndicatorRow
- ChatScrollFab.kt           — scrollToBottom utils + FAB
- ChatLifecycleEffects.kt    — session switch, lifecycle observer, auto-scroll, error snackbars
- ChatReactions.kt           — ReactionHeartsOverlay + FloatingHeart animation
- ChatStreaming.kt           — StreamingBubbleWithTypingEffect
- ChatLoadingOverlay.kt      — full-screen semi-transparent loading overlay

No behavioral change. All composables are public where they need to be
called from ChatScreen, otherwise keep their original visibility.
Unblocks #583 and #584 which were previously too risky to attempt in
the 2.2k-line file.

Co-authored-by: M57 <hy4ri@users.noreply.github.com>

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatComposer.kt

@@ -0,0 +1,441 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.InsertDriveFile
+import androidx.compose.material.icons.automirrored.filled.Send
+import androidx.compose.material.icons.filled.AttachFile
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Mic
+import androidx.compose.material.icons.filled.Stop
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+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.layout.ContentScale
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.AsyncImage
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.data.model.Attachment
+import com.m57.hermescontrol.data.ws.CommandBlocklist
+import com.m57.hermescontrol.data.ws.CommandCatalog
+import com.m57.hermescontrol.ui.chat.ChatInputPolicy
+
+/**
+ * The chat input bar with attach menu, slash-command dropdown,
+ * attachment preview chips, and mic/send/stop button swapping.
+ */
+@Composable
+fun ChatInputBar(
+    inputFieldValue: TextFieldValue,
+    onInputChange: (TextFieldValue) -> Unit,
+    onSend: () -> Unit,
+    onMicTap: () -> Unit,
+    isListening: Boolean,
+    isAgentTyping: Boolean,
+    isConnected: Boolean,
+    commandCatalog: CommandCatalog,
+    pendingAttachments: List<Attachment> = emptyList(),
+    onCameraTap: () -> Unit = {},
+    onImageTap: () -> Unit = {},
+    onFileTap: () -> Unit = {},
+    onRemoveAttachment: (Int) -> Unit = {},
+) {
+    // Allow sending while the agent is mid-turn or awaiting approval: the
+    // gateway's prompt.submit busy-input policy queues it as the next turn
+    // (tui_gateway/server.py:_handle_busy_submit), so the message is never
+    // dropped. Slash commands were already allowed; regular prompts now are too.
+    val canSend = ChatInputPolicy.canSend(inputFieldValue.text, pendingAttachments, isConnected)
+
+    // Attachment menu state
+    var showAttachmentMenu by remember { mutableStateOf(false) }
+
+    AnimatedVisibility(
+        visible = true,
+        enter = slideInVertically(initialOffsetY = { it }),
+        exit = slideOutVertically(targetOffsetY = { it }),
+    ) {
+        Card(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 4.dp, vertical = 4.dp),
+            shape = RoundedCornerShape(24.dp),
+            colors =
+                CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.85f),
+                ),
+            border =
+                BorderStroke(
+                    width = 1.dp,
+                    color = MaterialTheme.colorScheme.outline.copy(alpha = 0.15f),
+                ),
+            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
+        ) {
+            Column {
+                // Commands hidden from the suggestion menu — desktop/CLI-only and
+                // TUI-only commands that don't function on mobile (issue #574).
+                // Single source of truth: CommandBlocklist.UNSUPPORTED, which is
+                // also enforced at dispatch time (issue #576, deliverable #3).
+                val hiddenSlashDisplay = CommandBlocklist.UNSUPPORTED
+                val commandNames =
+                    commandCatalog.pairs
+                        .map { it[0] }
+                        .filter { it.lowercase() !in hiddenSlashDisplay }
+
+                androidx.compose.animation.AnimatedVisibility(
+                    visible = inputFieldValue.text.startsWith("/") && !inputFieldValue.text.contains(" "),
+                    enter = androidx.compose.animation.fadeIn() + androidx.compose.animation.expandVertically(),
+                    exit = androidx.compose.animation.fadeOut() + androidx.compose.animation.shrinkVertically(),
+                ) {
+                    val filteredCommands =
+                        commandNames.filter { it.startsWith(inputFieldValue.text, ignoreCase = true) }
+                    if (filteredCommands.isNotEmpty()) {
+                        androidx.compose.material3.Surface(
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 12.dp, vertical = 4.dp),
+                            shape = RoundedCornerShape(12.dp),
+                            color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
+                            border =
+                                androidx.compose.foundation.BorderStroke(
+                                    1.dp,
+                                    MaterialTheme.colorScheme.outline.copy(alpha = 0.2f),
+                                ),
+                        ) {
+                            LazyColumn(
+                                modifier = Modifier.heightIn(max = 200.dp),
+                            ) {
+                                items(filteredCommands, key = { it }) { cmd ->
+                                    DropdownMenuItem(
+                                        text = {
+                                            Text(
+                                                cmd,
+                                                fontWeight = FontWeight.Bold,
+                                                color = MaterialTheme.colorScheme.primary,
+                                            )
+                                        },
+                                        onClick = { onInputChange(ChatInputPolicy.commandFieldValue(cmd)) },
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Attachment preview chips
+                AnimatedVisibility(
+                    visible = pendingAttachments.isNotEmpty(),
+                    enter = fadeIn() + expandVertically(),
+                    exit = fadeOut() + shrinkVertically(),
+                ) {
+                    Row(
+                        modifier =
+                            Modifier
+                                .fillMaxWidth()
+                                .padding(horizontal = 12.dp, vertical = 4.dp),
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    ) {
+                        pendingAttachments.forEachIndexed { index, attachment ->
+                            AttachmentChip(
+                                attachment = attachment,
+                                onRemove = { onRemoveAttachment(index) },
+                            )
+                        }
+                    }
+                }
+
+                Row(
+                    modifier =
+                        Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 8.dp, vertical = 4.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Box {
+                        // Single attach button that opens a dropdown menu
+                        IconButton(
+                            onClick = { showAttachmentMenu = true },
+                            enabled = isConnected,
+                            modifier = Modifier.size(36.dp),
+                        ) {
+                            Icon(
+                                imageVector = Icons.Default.AttachFile,
+                                contentDescription = stringResource(R.string.chat_attach_desc),
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+
+                        DropdownMenu(
+                            expanded = showAttachmentMenu,
+                            onDismissRequest = { showAttachmentMenu = false },
+                        ) {
+                            DropdownMenuItem(
+                                text = { Text("Camera") },
+                                onClick = {
+                                    showAttachmentMenu = false
+                                    onCameraTap()
+                                },
+                                leadingIcon = {
+                                    Text(
+                                        text = "📷",
+                                        fontSize = 18.sp,
+                                    )
+                                },
+                            )
+                            DropdownMenuItem(
+                                text = { Text("Image") },
+                                onClick = {
+                                    showAttachmentMenu = false
+                                    onImageTap()
+                                },
+                                leadingIcon = {
+                                    Text(
+                                        text = "🖼️",
+                                        fontSize = 18.sp,
+                                    )
+                                },
+                            )
+                            DropdownMenuItem(
+                                text = { Text("File") },
+                                onClick = {
+                                    showAttachmentMenu = false
+                                    onFileTap()
+                                },
+                                leadingIcon = {
+                                    Text(
+                                        text = "📄",
+                                        fontSize = 18.sp,
+                                    )
+                                },
+                            )
+                        }
+                    }
+
+                    OutlinedTextField(
+                        value = inputFieldValue,
+                        onValueChange = onInputChange,
+                        modifier =
+                            Modifier
+                                .weight(1f)
+                                .heightIn(min = 36.dp, max = 120.dp)
+                                .padding(horizontal = 4.dp, vertical = 8.dp)
+                                .testTag("chat_input"),
+                        placeholder = {
+                            Text(
+                                if (!isConnected) {
+                                    stringResource(R.string.chat_input_placeholder_not_connected)
+                                } else if (ChatInputPolicy.showQueuePlaceholder(inputFieldValue.text, isAgentTyping)) {
+                                    stringResource(R.string.chat_input_placeholder_queue)
+                                } else if (isAgentTyping) {
+                                    stringResource(R.string.chat_input_placeholder_waiting)
+                                } else {
+                                    stringResource(R.string.chat_input_placeholder_type_message)
+                                },
+                                style = MaterialTheme.typography.bodyMedium,
+                            )
+                        },
+                        enabled = isConnected,
+                        singleLine = false,
+                        maxLines = 4,
+                        shape = RoundedCornerShape(20.dp),
+                        colors =
+                            OutlinedTextFieldDefaults.colors(
+                                focusedBorderColor = MaterialTheme.colorScheme.primary,
+                                unfocusedBorderColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f),
+                                cursorColor = MaterialTheme.colorScheme.primary,
+                            ),
+                    )
+
+                    Spacer(modifier = Modifier.width(4.dp))
+
+                    // Mic / Stop / Send button — swaps based on input state
+                    AnimatedContent(
+                        targetState =
+                            when {
+                                isListening -> "listening"
+                                inputFieldValue.text.isBlank() && pendingAttachments.isEmpty() -> "mic"
+                                else -> "send"
+                            },
+                        transitionSpec = {
+                            (scaleIn(initialScale = 0.8f) + fadeIn())
+                                .togetherWith(scaleOut(targetScale = 0.8f) + fadeOut())
+                        },
+                        label = "mic_send_toggle",
+                    ) { buttonState ->
+                        when (buttonState) {
+                            "mic" -> {
+                                FilledTonalButton(
+                                    onClick = onMicTap,
+                                    enabled = isConnected,
+                                    modifier =
+                                        Modifier
+                                            .size(40.dp)
+                                            .testTag("mic_button"),
+                                    shape = CircleShape,
+                                    contentPadding = PaddingValues(0.dp),
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Default.Mic,
+                                        contentDescription = stringResource(R.string.chat_mic_desc),
+                                    )
+                                }
+                            }
+
+                            "listening" -> {
+                                FilledTonalButton(
+                                    onClick = onMicTap,
+                                    modifier =
+                                        Modifier
+                                            .size(40.dp)
+                                            .testTag("mic_stop_button"),
+                                    shape = CircleShape,
+                                    contentPadding = PaddingValues(0.dp),
+                                    colors =
+                                        ButtonDefaults.filledTonalButtonColors(
+                                            containerColor = MaterialTheme.colorScheme.error,
+                                        ),
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Default.Stop,
+                                        contentDescription = "Stop listening",
+                                        tint = MaterialTheme.colorScheme.onError,
+                                    )
+                                }
+                            }
+
+                            else -> {
+                                FilledTonalButton(
+                                    onClick = onSend,
+                                    enabled = canSend,
+                                    modifier =
+                                        Modifier
+                                            .size(40.dp)
+                                            .testTag("send_button"),
+                                    shape = CircleShape,
+                                    contentPadding = PaddingValues(0.dp),
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.AutoMirrored.Filled.Send,
+                                        contentDescription = stringResource(R.string.chat_send_desc),
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Compact chip showing a pending attachment with a remove button.
+ */
+@Composable
+fun AttachmentChip(
+    attachment: Attachment,
+    onRemove: () -> Unit,
+) {
+    Surface(
+        shape = RoundedCornerShape(16.dp),
+        color = MaterialTheme.colorScheme.surfaceVariant,
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)),
+    ) {
+        Row(
+            modifier = Modifier.padding(start = 10.dp, end = 6.dp, top = 4.dp, bottom = 4.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (attachment.isImage) {
+                AsyncImage(
+                    model = attachment.uri,
+                    contentDescription = attachment.name,
+                    modifier =
+                        Modifier
+                            .size(20.dp)
+                            .clip(RoundedCornerShape(4.dp)),
+                    contentScale = ContentScale.Crop,
+                )
+                Spacer(modifier = Modifier.width(4.dp))
+            } else {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.InsertDriveFile,
+                    contentDescription = null,
+                    modifier = Modifier.size(16.dp),
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                Spacer(modifier = Modifier.width(4.dp))
+            }
+            Text(
+                text = attachment.name,
+                style = MaterialTheme.typography.labelSmall,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.widthIn(max = 120.dp),
+            )
+            Spacer(modifier = Modifier.width(4.dp))
+            IconButton(
+                onClick = onRemove,
+                modifier = Modifier.size(18.dp),
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Close,
+                    contentDescription = stringResource(R.string.chat_attach_remove_desc),
+                    modifier = Modifier.size(14.dp),
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatConnectionBanner.kt

@@ -0,0 +1,143 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.data.ws.ConnectionStatus
+import com.m57.hermescontrol.theme.LocalHermesStatusColors
+
+/**
+ * Top-anchored banner shown when the WebSocket connection is in a non-healthy
+ * state (RECONNECTING / DISCONNECTED / NO_NETWORK / AUTH_EXPIRED).
+ *
+ * Extracted from the original ChatScreen.kt — see issue #621.
+ */
+@Composable
+fun ChatConnectionBanner(
+    connectionStatus: ConnectionStatus,
+    onReconnect: () -> Unit,
+    onReloginClick: () -> Unit,
+) {
+    val isShown =
+        connectionStatus != ConnectionStatus.CONNECTED &&
+            connectionStatus != ConnectionStatus.CONNECTING
+    AnimatedVisibility(
+        visible = isShown,
+        enter = expandVertically() + fadeIn(),
+        exit = shrinkVertically() + fadeOut(),
+    ) {
+        Surface(
+            modifier = Modifier.fillMaxWidth(),
+            color = LocalHermesStatusColors.current.errorContainer,
+            contentColor = LocalHermesStatusColors.current.error,
+        ) {
+            Row(
+                modifier =
+                    Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp, vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                Row(
+                    modifier = Modifier.weight(1f),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (connectionStatus == ConnectionStatus.RECONNECTING) {
+                        CircularProgressIndicator(
+                            modifier = Modifier.size(16.dp).padding(end = 8.dp),
+                            strokeWidth = 2.dp,
+                            color = LocalHermesStatusColors.current.error,
+                        )
+                    }
+                    Text(
+                        modifier = Modifier.weight(1f, fill = false),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        text =
+                            when (connectionStatus) {
+                                ConnectionStatus.RECONNECTING -> stringResource(R.string.chat_status_reconnecting)
+                                ConnectionStatus.DISCONNECTED -> stringResource(R.string.chat_status_disconnected)
+                                ConnectionStatus.NO_NETWORK -> stringResource(R.string.chat_status_no_network)
+                                ConnectionStatus.AUTH_EXPIRED -> stringResource(R.string.chat_status_auth_expired)
+                                else -> ""
+                            },
+                        style = MaterialTheme.typography.bodyMedium,
+                    )
+                }
+                when (connectionStatus) {
+                    ConnectionStatus.DISCONNECTED -> {
+                        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                            TextButton(
+                                onClick = onReloginClick,
+                                colors =
+                                    ButtonDefaults.textButtonColors(
+                                        contentColor = LocalHermesStatusColors.current.error,
+                                    ),
+                            ) {
+                                Text(stringResource(R.string.chat_action_relogin))
+                            }
+                            TextButton(
+                                onClick = onReconnect,
+                                colors =
+                                    ButtonDefaults.textButtonColors(
+                                        contentColor = LocalHermesStatusColors.current.error,
+                                    ),
+                            ) {
+                                Text(stringResource(R.string.chat_action_reconnect))
+                            }
+                        }
+                    }
+
+                    ConnectionStatus.NO_NETWORK -> {
+                        TextButton(
+                            onClick = onReconnect,
+                            colors =
+                                ButtonDefaults.textButtonColors(
+                                    contentColor = LocalHermesStatusColors.current.error,
+                                ),
+                        ) {
+                            Text(stringResource(R.string.chat_action_reconnect))
+                        }
+                    }
+
+                    ConnectionStatus.RECONNECTING,
+                    ConnectionStatus.AUTH_EXPIRED,
+                    -> {
+                        TextButton(
+                            onClick = onReloginClick,
+                            colors =
+                                ButtonDefaults.textButtonColors(
+                                    contentColor = LocalHermesStatusColors.current.error,
+                                ),
+                        ) {
+                            Text(stringResource(R.string.chat_action_relogin))
+                        }
+                    }
+
+                    else -> {}
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatDialogs.kt

@@ -0,0 +1,330 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.rememberScrollState
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.theme.LocalHermesStatusColors
+import com.m57.hermescontrol.ui.chat.ClarifyUi
+
+/** Dialog shown when the agent asks the user to clarify between options. */
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun ClarifyDialog(
+    clarify: ClarifyUi,
+    onOptionSelected: (String) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    var typedText by rememberSaveable(clarify.text) { mutableStateOf("") }
+
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.chat_clarify_title)) },
+        text = {
+            Column(modifier = Modifier.fillMaxWidth()) {
+                Column(
+                    modifier =
+                        Modifier
+                            .weight(1f, fill = false)
+                            .verticalScroll(rememberScrollState()),
+                    verticalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    Text(text = clarify.text)
+
+                    if (clarify.options.isNotEmpty()) {
+                        Spacer(modifier = Modifier.height(4.dp))
+                        Text(
+                            text = stringResource(R.string.chat_clarify_hint),
+                            style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                        Spacer(modifier = Modifier.height(4.dp))
+                        clarify.options.forEach { option ->
+                            Surface(
+                                onClick = { typedText = option },
+                                modifier =
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .testTag("clarify_option"),
+                                shape = MaterialTheme.shapes.medium,
+                                color = MaterialTheme.colorScheme.secondaryContainer,
+                            ) {
+                                Box(
+                                    modifier =
+                                        Modifier
+                                            .combinedClickable(
+                                                role = Role.Button,
+                                                onClick = { typedText = option },
+                                                onLongClick = { onOptionSelected(option) },
+                                            ).padding(horizontal = 24.dp, vertical = 10.dp),
+                                    contentAlignment = Alignment.Center,
+                                ) {
+                                    Text(
+                                        text = option,
+                                        color = MaterialTheme.colorScheme.onSecondaryContainer,
+                                        style = MaterialTheme.typography.labelLarge,
+                                    )
+                                }
+                            }
+                            Spacer(modifier = Modifier.height(4.dp))
+                        }
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+                OutlinedTextField(
+                    value = typedText,
+                    onValueChange = { typedText = it },
+                    label = { Text(stringResource(R.string.chat_clarify_response)) },
+                    modifier = Modifier.fillMaxWidth(),
+                    singleLine = true,
+                )
+            }
+        },
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    if (typedText.isNotBlank()) {
+                        onOptionSelected(typedText)
+                    }
+                },
+                enabled = typedText.isNotBlank(),
+            ) {
+                Text(stringResource(R.string.chat_send))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text(stringResource(R.string.chat_dismiss))
+            }
+        },
+    )
+}
+
+/**
+ * Secure password dialog for a pending `sudo.request` (issue #524).
+ * The backend blocked the turn waiting for the sudo password — previously
+ * mobile dropped the event and the agent hung forever.
+ */
+@Composable
+fun SudoPromptDialog(
+    onConfirm: (String) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    var password by remember { mutableStateOf("") }
+
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.chat_sudo_title)) },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                Text(text = stringResource(R.string.chat_sudo_body))
+                Spacer(modifier = Modifier.height(4.dp))
+                OutlinedTextField(
+                    value = password,
+                    onValueChange = { password = it },
+                    label = { Text(stringResource(R.string.chat_sudo_password)) },
+                    modifier = Modifier.fillMaxWidth().testTag("sudo_password_input"),
+                    singleLine = true,
+                    visualTransformation = PasswordVisualTransformation(),
+                    keyboardOptions = KeyboardOptions(autoCorrectEnabled = false, keyboardType = KeyboardType.Password),
+                )
+            }
+        },
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    if (password.isNotBlank()) {
+                        onConfirm(password)
+                    }
+                },
+                enabled = password.isNotBlank(),
+            ) {
+                Text(stringResource(R.string.chat_send))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text(stringResource(R.string.chat_dismiss))
+            }
+        },
+    )
+}
+
+/**
+ * Secure value dialog for a pending `secret.request` (issue #524).
+ * The backend blocked the turn waiting for a secret (token/password) —
+ * previously mobile dropped the event and the agent hung forever.
+ */
+@Composable
+fun SecretPromptDialog(
+    onConfirm: (String) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    var secret by remember { mutableStateOf("") }
+
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.chat_secret_title)) },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                Text(text = stringResource(R.string.chat_secret_body))
+                Spacer(modifier = Modifier.height(4.dp))
+                OutlinedTextField(
+                    value = secret,
+                    onValueChange = { secret = it },
+                    label = { Text(stringResource(R.string.chat_secret_value)) },
+                    modifier = Modifier.fillMaxWidth().testTag("secret_value_input"),
+                    singleLine = true,
+                    visualTransformation = PasswordVisualTransformation(),
+                    keyboardOptions = KeyboardOptions(autoCorrectEnabled = false, keyboardType = KeyboardType.Password),
+                )
+            }
+        },
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    if (secret.isNotBlank()) {
+                        onConfirm(secret)
+                    }
+                },
+                enabled = secret.isNotBlank(),
+            ) {
+                Text(stringResource(R.string.chat_send))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text(stringResource(R.string.chat_dismiss))
+            }
+        },
+    )
+}
+
+/** Re-authentication dialog shown when the connection enters AUTH_EXPIRED. */
+@Composable
+fun ReloginDialog(
+    onDismiss: () -> Unit,
+    onRelogin: (String, String, (Boolean, String?) -> Unit) -> Unit,
+) {
+    val emptyCredentialsError = stringResource(R.string.chat_relogin_error_empty)
+    val statusColors = LocalHermesStatusColors.current
+    var username by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+    var isLoading by remember { mutableStateOf(false) }
+    var errorMessage by remember { mutableStateOf<String?>(null) }
+
+    AlertDialog(
+        onDismissRequest = { if (!isLoading) onDismiss() },
+        title = { Text(stringResource(R.string.chat_relogin_title)) },
+        text = {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                OutlinedTextField(
+                    value = username,
+                    onValueChange = {
+                        username = it
+                        errorMessage = null
+                    },
+                    label = { Text(stringResource(R.string.chat_relogin_username)) },
+                    singleLine = true,
+                    enabled = !isLoading,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                OutlinedTextField(
+                    value = password,
+                    onValueChange = {
+                        password = it
+                        errorMessage = null
+                    },
+                    label = { Text(stringResource(R.string.chat_relogin_password)) },
+                    singleLine = true,
+                    enabled = !isLoading,
+                    visualTransformation =
+                        androidx.compose.ui.text.input
+                            .PasswordVisualTransformation(),
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                if (errorMessage != null) {
+                    Text(
+                        text = errorMessage!!,
+                        color = statusColors.error,
+                        style = MaterialTheme.typography.bodySmall,
+                    )
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(
+                enabled = !isLoading,
+                onClick = {
+                    if (username.isBlank() || password.isBlank()) {
+                        errorMessage = emptyCredentialsError
+                        return@TextButton
+                    }
+                    isLoading = true
+                    errorMessage = null
+                    onRelogin(username, password) { success, error ->
+                        isLoading = false
+                        if (success) {
+                            onDismiss()
+                        } else {
+                            errorMessage = error ?: "Unknown error"
+                        }
+                    }
+                },
+            ) {
+                if (isLoading) {
+                    CircularProgressIndicator(
+                        modifier = Modifier.size(16.dp),
+                        strokeWidth = 2.dp,
+                        color = statusColors.info,
+                    )
+                } else {
+                    Text(stringResource(R.string.chat_relogin_submit))
+                }
+            }
+        },
+        dismissButton = {
+            TextButton(
+                enabled = !isLoading,
+                onClick = onDismiss,
+            ) {
+                Text(stringResource(R.string.chat_relogin_cancel))
+            }
+        },
+    )
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatIndicators.kt

@@ -0,0 +1,232 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.clickable
+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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ExpandLess
+import androidx.compose.material.icons.filled.ExpandMore
+import androidx.compose.material.icons.outlined.Psychology
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+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.graphics.graphicsLayer
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.theme.LocalHermesStatusColors
+import com.m57.hermescontrol.ui.chat.SubagentIndicator
+
+/**
+ * Animated "🤔 Thinking…" card shown while the assistant is thinking
+ * but has not yet produced visible text.
+ */
+@Composable
+fun ThinkingIndicator(thinkingText: String) {
+    val infiniteTransition = rememberInfiniteTransition(label = "thinking")
+    val alpha by infiniteTransition.animateFloat(
+        initialValue = 0.3f,
+        targetValue = 1f,
+        animationSpec =
+            infiniteRepeatable(
+                animation = tween(600, easing = LinearEasing),
+                repeatMode = RepeatMode.Reverse,
+            ),
+        label = "thinking_alpha",
+    )
+
+    Box(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp, vertical = 4.dp),
+        contentAlignment = Alignment.CenterStart,
+    ) {
+        Card(
+            colors =
+                CardDefaults.cardColors(
+                    containerColor = LocalHermesStatusColors.current.infoContainer.copy(alpha = 0.5f),
+                ),
+            shape = RoundedCornerShape(12.dp),
+        ) {
+            Row(
+                modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    text = "🤔",
+                    fontSize = 14.sp,
+                    modifier = Modifier.graphicsLayer { this.alpha = alpha },
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text =
+                        if (thinkingText.isNotBlank()) {
+                            val display = thinkingText.takeLast(100)
+                            stringResource(R.string.chat_thinking_param, display)
+                        } else {
+                            stringResource(R.string.chat_thinking)
+                        },
+                    style =
+                        MaterialTheme.typography.bodySmall.copy(
+                            color = LocalHermesStatusColors.current.info,
+                        ),
+                    maxLines = 2,
+                    modifier = Modifier.animateContentSize(),
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Collapsible card showing the assistant's reasoning trace
+ * (reasoning-model thinking steps) before the final answer.
+ */
+@Composable
+fun ReasoningIndicator(reasoningText: String) {
+    var expanded by remember { mutableStateOf(false) }
+    val statusColors = LocalHermesStatusColors.current
+    Card(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp, vertical = 4.dp)
+                .clickable(
+                    role = Role.Button,
+                    onClick = { expanded = !expanded },
+                ),
+        colors =
+            CardDefaults.cardColors(
+                containerColor = statusColors.infoContainer.copy(alpha = 0.5f),
+            ),
+        shape = RoundedCornerShape(12.dp),
+    ) {
+        Column(modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    imageVector = Icons.Outlined.Psychology,
+                    contentDescription = stringResource(R.string.chat_reasoning),
+                    tint = statusColors.info,
+                    modifier = Modifier.size(18.dp),
+                )
+                Spacer(Modifier.width(8.dp))
+                Text(
+                    text = stringResource(R.string.chat_reasoning),
+                    style = MaterialTheme.typography.labelMedium,
+                    color = statusColors.info,
+                )
+                Spacer(Modifier.weight(1f))
+                Icon(
+                    imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
+                    contentDescription =
+                        stringResource(
+                            if (expanded) R.string.chat_reasoning_collapse else R.string.chat_reasoning_expand,
+                        ),
+                    tint = statusColors.info,
+                    modifier = Modifier.size(18.dp),
+                )
+            }
+            AnimatedVisibility(visible = expanded) {
+                Text(
+                    text = reasoningText,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = statusColors.info,
+                    modifier = Modifier.padding(top = 4.dp),
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Row showing a subagent task progress chip in the message list.
+ */
+@Composable
+fun SubagentIndicatorRow(
+    indicator: SubagentIndicator,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier =
+            modifier
+                .padding(horizontal = 12.dp, vertical = 4.dp),
+        shape = RoundedCornerShape(16.dp),
+        color = MaterialTheme.colorScheme.surfaceVariant,
+        border =
+            BorderStroke(
+                width = 1.dp,
+                color = MaterialTheme.colorScheme.outline.copy(alpha = 0.2f),
+            ),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Text(
+                text = "🔀",
+                style = MaterialTheme.typography.bodySmall,
+            )
+
+            val taskProgressText =
+                if (indicator.taskIndex != null && indicator.taskCount != null) {
+                    " (${indicator.taskIndex}/${indicator.taskCount})"
+                } else {
+                    ""
+                }
+
+            val goalText = indicator.goal ?: "Subagent task"
+            val textPreview =
+                if (!indicator.text.isNullOrEmpty()) {
+                    ": ${indicator.text}"
+                } else if (!indicator.summary.isNullOrEmpty()) {
+                    ": ${indicator.summary}"
+                } else {
+                    ""
+                }
+
+            Text(
+                text = "$goalText$taskProgressText$textPreview",
+                style =
+                    MaterialTheme.typography.bodySmall.copy(
+                        fontSize = 11.sp,
+                        fontFamily = FontFamily.Monospace,
+                    ),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatLifecycleEffects.kt

@@ -0,0 +1,208 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import android.Manifest
+import android.content.pm.PackageManager
+import android.os.Build
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.platform.LocalContext
+import androidx.core.content.ContextCompat
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import com.m57.hermescontrol.NavigationController
+import com.m57.hermescontrol.data.ws.ConnectionStatus
+import com.m57.hermescontrol.notification.NotificationHelper
+import com.m57.hermescontrol.ui.chat.ChatMessage
+import com.m57.hermescontrol.ui.chat.ChatViewModel
+import com.m57.hermescontrol.ui.chat.ClarifyUi
+import com.m57.hermescontrol.ui.chat.SecretPromptUi
+import com.m57.hermescontrol.ui.chat.SudoPromptUi
+import kotlinx.coroutines.flow.collectLatest
+
+@Composable
+fun ChatLifecycleEffects(
+    sessionId: String?,
+    connectionStatus: ConnectionStatus,
+    currentSessionId: String?,
+    messages: List<ChatMessage>,
+    streamingMessage: ChatMessage?,
+    isThinking: Boolean,
+    errorMessage: String?,
+    backgroundCompleteMessage: String?,
+    isSearchActive: Boolean,
+    currentSearchMatchIndex: Int,
+    searchMatchIndices: List<Int>,
+    clarifyRequest: ClarifyUi?,
+    sudoPrompt: SudoPromptUi?,
+    secretPrompt: SecretPromptUi?,
+    listState: LazyListState,
+    snackbarHostState: SnackbarHostState,
+    viewModel: ChatViewModel,
+) {
+    val context = LocalContext.current
+    val lifecycleOwner = LocalLifecycleOwner.current
+
+    // Publish the notification session ID to the ViewModel synchronously
+    SideEffect {
+        viewModel.initialSessionId = sessionId
+    }
+
+    // Switch to session from notification/history
+    var lastSessionId by remember { mutableStateOf<String?>(null) }
+    val pendingSessionId = NavigationController.pendingSessionId
+    LaunchedEffect(sessionId, pendingSessionId, connectionStatus) {
+        if (connectionStatus != ConnectionStatus.CONNECTED) return@LaunchedEffect
+        val target = if (!sessionId.isNullOrBlank()) sessionId else pendingSessionId
+        if (!target.isNullOrBlank()) {
+            viewModel.switchSession(target)
+            if (target == pendingSessionId) {
+                NavigationController.pendingSessionId = null
+            }
+        }
+    }
+
+    // Lifecycle observer for notification foreground service
+    DisposableEffect(lifecycleOwner) {
+        val observer =
+            LifecycleEventObserver { _, event ->
+                when (event) {
+                    Lifecycle.Event.ON_START -> {
+                        NotificationHelper.setAppForeground(context, true)
+                        NotificationHelper.stop(context)
+                        viewModel.refreshSettings()
+                        viewModel.refreshCurrentSession()
+                    }
+
+                    Lifecycle.Event.ON_STOP -> {
+                        NotificationHelper.setAppForeground(context, false)
+                        NotificationHelper.start(context)
+                    }
+
+                    else -> {}
+                }
+            }
+        lifecycleOwner.lifecycle.addObserver(observer)
+        onDispose { lifecycleOwner.lifecycle.removeObserver(observer) }
+    }
+
+    // Request POST_NOTIFICATIONS permission on Android 13+
+    val requestNotificationPermission =
+        rememberLauncherForActivityResult(
+            contract = ActivityResultContracts.RequestPermission(),
+        ) { /* granted */ }
+    LaunchedEffect(Unit) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+            val permission = Manifest.permission.POST_NOTIFICATIONS
+            if (ContextCompat.checkSelfPermission(context, permission) !=
+                PackageManager.PERMISSION_GRANTED
+            ) {
+                requestNotificationPermission.launch(permission)
+            }
+        }
+    }
+
+    // Auto-scroll to bottom on new messages + session switch (issues #584/#583)
+    //
+    // IMPORTANT (m57, #584 follow-up): while an assistant message is STREAMING
+    // the scroll is left completely FREE — no auto-follow of the streaming
+    // message — so the user can scroll up/down to read while it generates.
+    // Auto-scroll only happens on explicit actions (send / FAB / session
+    // switch, handled elsewhere) and when a discrete non-streaming message
+    // lands while the user is already pinned to the bottom.
+    //
+    // The effect runs once (Unit), so we mirror the params through
+    // rememberUpdatedState and read them live inside the flow/collect — that
+    // keeps the lambda bound to the latest values instead of first-composition
+    // closure captures. streamingMessage is intentionally NOT a flow key, so
+    // the flow doesn't churn per token; we just read it live to gate scrolling.
+    val latestMessages by rememberUpdatedState(messages)
+    val latestStreaming by rememberUpdatedState(streamingMessage)
+    val latestIsThinking by rememberUpdatedState(isThinking)
+    val latestSessionId by rememberUpdatedState(currentSessionId)
+    LaunchedEffect(Unit) {
+        snapshotFlow {
+            Pair(latestMessages.size, latestIsThinking)
+        }.collectLatest { (msgCount, thinking) ->
+            val totalItems = msgCount + (if (thinking) 1 else 0)
+            if (totalItems <= 0) return@collectLatest
+            // While a message is streaming, leave scrolling free (no auto-follow).
+            if (latestStreaming != null) return@collectLatest
+            val isSessionSwitch = latestSessionId != lastSessionId
+            if (isSessionSwitch) {
+                lastSessionId = latestSessionId
+                listState.scrollToBottom(animated = false)
+                return@collectLatest
+            }
+            if (!listState.isAtBottom()) return@collectLatest
+            // Discrete new message while pinned to the bottom — follow it.
+            listState.scrollToBottom(animated = true)
+        }
+    }
+
+    // Show error as snackbar
+    LaunchedEffect(errorMessage) {
+        errorMessage?.let { error ->
+            snackbarHostState.showSnackbar(error)
+            viewModel.clearError()
+        }
+    }
+
+    // Show background-complete as a non-blocking snackbar (issue #527)
+    LaunchedEffect(backgroundCompleteMessage) {
+        backgroundCompleteMessage?.let { message ->
+            snackbarHostState.showSnackbar(message)
+            viewModel.clearBackgroundComplete()
+        }
+    }
+
+    // Clarify dialog
+    clarifyRequest?.let { clarify ->
+        ClarifyDialog(
+            clarify = clarify,
+            onOptionSelected = viewModel::respondToClarify,
+            onDismiss = viewModel::dismissClarify,
+        )
+    }
+
+    // Sudo / secret prompt dialogs (issue #524)
+    sudoPrompt?.let { prompt ->
+        SudoPromptDialog(
+            onConfirm = viewModel::respondToSudo,
+            onDismiss = viewModel::dismissSudo,
+        )
+    }
+
+    secretPrompt?.let { prompt ->
+        SecretPromptDialog(
+            onConfirm = viewModel::respondToSecret,
+            onDismiss = viewModel::dismissSecret,
+        )
+    }
+
+    // Scroll to current search match
+    LaunchedEffect(isSearchActive, currentSearchMatchIndex, searchMatchIndices) {
+        if (isSearchActive &&
+            currentSearchMatchIndex >= 0 &&
+            currentSearchMatchIndex < searchMatchIndices.size &&
+            messages.isNotEmpty()
+        ) {
+            val targetIndex = searchMatchIndices[currentSearchMatchIndex]
+            listState.animateScrollToItem(
+                targetIndex.coerceIn(0, messages.lastIndex),
+            )
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatLoadingOverlay.kt

@@ -0,0 +1,64 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+
+/** Full-screen semi-transparent overlay shown during initial session load. */
+@Composable
+fun ChatLoadingOverlay(isLoading: Boolean) {
+    AnimatedVisibility(
+        visible = isLoading,
+        enter = fadeIn(),
+        exit = fadeOut(),
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .background(MaterialTheme.colorScheme.background.copy(alpha = 0.7f)),
+            contentAlignment = Alignment.Center,
+        ) {
+            Card(
+                colors =
+                    CardDefaults.cardColors(
+                        containerColor = MaterialTheme.colorScheme.surface,
+                    ),
+                elevation = CardDefaults.cardElevation(4.dp),
+            ) {
+                Column(
+                    modifier = Modifier.padding(32.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    CircularProgressIndicator(
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Text(
+                        text = stringResource(R.string.chat_status_connecting),
+                        style = MaterialTheme.typography.bodyMedium,
+                    )
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatMessageList.kt

@@ -0,0 +1,195 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.ui.chat.ChatBubble
+import com.m57.hermescontrol.ui.chat.ChatMessage
+import com.m57.hermescontrol.ui.chat.ChatViewModel
+import com.m57.hermescontrol.ui.chat.MessageRole
+import com.m57.hermescontrol.ui.chat.SubagentIndicator
+import com.m57.hermescontrol.ui.common.EmptyState
+
+/**
+ * The chat message list.
+ *
+ * Lay children out vertically so the search bar occupies real layout space
+ * ABOVE the message list. Without this container the call site is a Box,
+ * which overlays the LazyColumn on top of the search AnimatedVisibility and
+ * swallows every tap on the bar (bar visible but not clickable).
+ */
+@Composable
+fun ChatMessageList(
+    messages: List<ChatMessage>,
+    streamingMessage: ChatMessage?,
+    isThinking: Boolean,
+    thinkingText: String,
+    isSearchActive: Boolean,
+    searchQuery: String,
+    currentSearchMatchIndex: Int,
+    searchMatchIndices: List<Int>,
+    typingEffectEnabled: Boolean,
+    typingEffectDelayMs: Int,
+    isLoading: Boolean,
+    isLoadingOlder: Boolean,
+    isDark: Boolean,
+    listState: androidx.compose.foundation.lazy.LazyListState,
+    lastAnimatedMessageId: String?,
+    onLastAnimatedMessageIdChange: (String?) -> Unit,
+    viewModel: ChatViewModel,
+    subagentIndicators: List<SubagentIndicator> = emptyList(),
+) {
+    Column(modifier = Modifier.fillMaxSize()) {
+        // Search bar
+        AnimatedVisibility(
+            visible = isSearchActive,
+            enter = expandVertically() + fadeIn(),
+            exit = shrinkVertically() + fadeOut(),
+        ) {
+            Surface(
+                modifier = Modifier.fillMaxWidth(),
+                color = MaterialTheme.colorScheme.surfaceContainerLow,
+                tonalElevation = 2.dp,
+                border =
+                    BorderStroke(
+                        width = 1.dp,
+                        color = MaterialTheme.colorScheme.outline.copy(alpha = 0.12f),
+                    ),
+            ) {
+                Box(modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)) {
+                    SearchBarRow(
+                        searchQuery = searchQuery,
+                        onQueryChange = { viewModel.setSearchQuery(it) },
+                        searchMatchCount = searchMatchIndices.size,
+                        currentMatchIndex = currentSearchMatchIndex,
+                        onNavigateUp = { viewModel.navigateSearchMatch(-1) },
+                        onNavigateDown = { viewModel.navigateSearchMatch(1) },
+                        onClose = { viewModel.clearSearch() },
+                    )
+                }
+            }
+        }
+
+        if (messages.isEmpty() && !isLoading) {
+            EmptyState(
+                title = stringResource(R.string.chat_empty_title),
+                subtitle = stringResource(R.string.chat_empty_subtitle),
+            )
+        }
+
+        LazyColumn(
+            state = listState,
+            modifier = Modifier.fillMaxWidth().weight(1f),
+            contentPadding = PaddingValues(vertical = 8.dp),
+        ) {
+            if (isLoadingOlder) {
+                item(key = "loading-older") {
+                    Box(
+                        modifier = Modifier.fillMaxWidth().padding(12.dp),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        CircularProgressIndicator(modifier = Modifier.size(24.dp))
+                    }
+                }
+            }
+            itemsIndexed(
+                items = messages,
+                key = { _, message -> message.id },
+            ) { index, message ->
+                val isCurrentMatch =
+                    isSearchActive &&
+                        currentSearchMatchIndex >= 0 &&
+                        currentSearchMatchIndex < searchMatchIndices.size &&
+                        searchMatchIndices[currentSearchMatchIndex] == index
+
+                val isLastMessage = index == messages.lastIndex
+                val isAssistant = message.role == MessageRole.ASSISTANT
+
+                if (isAssistant && message.reasoningText.isNotBlank()) {
+                    ReasoningIndicator(message.reasoningText)
+                }
+
+                if (typingEffectEnabled && isLastMessage && isAssistant && message.isStreaming &&
+                    lastAnimatedMessageId != message.id
+                ) {
+                    StreamingBubbleWithTypingEffect(
+                        streaming = message,
+                        typingDelayMs = typingEffectDelayMs,
+                        isDark = isDark,
+                        onAnimationComplete = {
+                            onLastAnimatedMessageIdChange(message.id)
+                        },
+                    )
+                } else {
+                    ChatBubble(
+                        message = message,
+                        isDarkTheme = isDark,
+                        searchQuery = if (isSearchActive) searchQuery else "",
+                        isCurrentMatch = isCurrentMatch,
+                        onRespondApproval = viewModel::respondToApproval,
+                    )
+                }
+            }
+
+            // Streaming message
+            streamingMessage?.let { streaming ->
+                item(key = "streaming-${streaming.id}") {
+                    if (streaming.reasoningText.isNotBlank()) {
+                        ReasoningIndicator(streaming.reasoningText)
+                    }
+                    if (typingEffectEnabled && streaming.isStreaming) {
+                        StreamingBubbleWithTypingEffect(
+                            streaming = streaming,
+                            typingDelayMs = typingEffectDelayMs,
+                            isDark = isDark,
+                        )
+                    } else {
+                        ChatBubble(
+                            message = streaming,
+                            isDarkTheme = isDark,
+                            searchQuery = "",
+                            isCurrentMatch = false,
+                        )
+                    }
+                }
+            }
+
+            // Thinking indicator
+            if (isThinking) {
+                item(key = "thinking") {
+                    ThinkingIndicator(thinkingText)
+                }
+            }
+
+            // Subagent indicators
+            items(
+                items = subagentIndicators,
+                key = { indicator -> "subagent-${indicator.subagentId ?: indicator.goal ?: indicator.type}" },
+            ) { indicator ->
+                SubagentIndicatorRow(indicator = indicator)
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatReactions.kt

@@ -0,0 +1,115 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.key
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+// ── Reaction hearts animation ──────────────────────────────────────────
+
+/**
+ * Lightweight floating-hearts animation triggered by a `reaction` WS event.
+ * Hearts rise from the bottom-center of the chat area, drift slightly
+ * horizontally, and fade out — purely cosmetic, no persistence.
+ */
+@Composable
+fun ReactionHeartsOverlay(
+    reactionKind: String?,
+    modifier: Modifier = Modifier,
+) {
+    val emojis =
+        remember(reactionKind) {
+            when (reactionKind) {
+                "ily", "<3", "good bot" -> {
+                    listOf("💗", "❤️", "💕", "💖", "🩷", "💘", "💝")
+                }
+
+                else -> {
+                    listOf("💗", "❤️", "💕", "💖")
+                }
+            }
+        }
+
+    AnimatedVisibility(
+        visible = reactionKind != null,
+        enter = fadeIn(animationSpec = tween(200)),
+        exit = fadeOut(animationSpec = tween(400)),
+        modifier = modifier.fillMaxSize(),
+    ) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.BottomCenter,
+        ) {
+            emojis.forEachIndexed { index, emoji ->
+                key("heart_$index") {
+                    FloatingHeart(
+                        emoji = emoji,
+                        delayMs = index * 120L + 100L,
+                        horizontalOffset = ((index - emojis.size / 2) * 28).dp,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun FloatingHeart(
+    emoji: String,
+    delayMs: Long,
+    horizontalOffset: Dp,
+) {
+    val alpha = remember { Animatable(0f) }
+    val offsetY = remember { Animatable(0f) }
+
+    LaunchedEffect(Unit) {
+        delay(delayMs)
+        // Phase 1: fade in quickly at the bottom
+        launch {
+            alpha.animateTo(
+                targetValue = 1f,
+                animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
+            )
+            // Phase 2: fade out slowly while rising
+            alpha.animateTo(
+                targetValue = 0f,
+                animationSpec = tween(durationMillis = 1400, easing = LinearEasing),
+            )
+        }
+        // Float upward over the full animation
+        launch {
+            offsetY.animateTo(
+                targetValue = -220f,
+                animationSpec = tween(durationMillis = 1600, easing = LinearEasing),
+            )
+        }
+    }
+
+    Text(
+        text = emoji,
+        fontSize = 24.sp,
+        modifier =
+            Modifier
+                .offset(x = horizontalOffset, y = offsetY.value.dp)
+                .graphicsLayer(alpha = alpha.value),
+    )
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatScrollFab.kt

@@ -0,0 +1,121 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.gestures.animateScrollBy
+import androidx.compose.foundation.gestures.scrollBy
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.ui.chat.ChatMessage
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+
+/**
+ * Returns true when the list is scrolled near its bottom
+ * (within [threshold] items of the last index).
+ */
+fun LazyListState.isAtBottom(threshold: Int = 3): Boolean {
+    val layoutInfo = this.layoutInfo
+    val visibleItems = layoutInfo.visibleItemsInfo
+    if (visibleItems.isEmpty()) return true
+    val lastVisibleItem = visibleItems.last()
+    return lastVisibleItem.index >= layoutInfo.totalItemsCount - threshold
+}
+
+/**
+ * Scroll so the bottom edge of the last item is aligned to the bottom of the
+ * viewport (issue #583).
+ *
+ * `animateScrollToItem(lastIndex)` only top-aligns the last item, so when the
+ * last item is taller than the viewport its bottom is clipped below the fold.
+ * We first top-align (instant), then scroll the exact remaining gap so the
+ * bottom is visible. Using the remaining delta (not `scrollOffset = Int.MAX_VALUE`)
+ * avoids integer overflow in the internal scroll-position clamp, which would
+ * otherwise wrap the offset to 0 and scroll back to the top.
+ */
+suspend fun LazyListState.scrollToBottom(animated: Boolean) {
+    val layoutInfo = this.layoutInfo
+    if (layoutInfo.totalItemsCount == 0) return
+    val lastIndex = layoutInfo.totalItemsCount - 1
+    // Top-align the last item first so layoutInfo reflects the last item's offset.
+    // When animated, use the animated variant so the FAB / send clicks keep a
+    // smooth scroll instead of an instant jump followed by a tiny animation.
+    if (animated) {
+        animateScrollToItem(lastIndex)
+    } else {
+        scrollToItem(lastIndex)
+    }
+    val info = this.layoutInfo
+    val lastItem = info.visibleItemsInfo.lastOrNull { it.index == lastIndex } ?: return
+    val remaining =
+        (lastItem.offset + lastItem.size + info.afterContentPadding) - info.viewportEndOffset
+    if (remaining > 0) {
+        if (animated) {
+            animateScrollBy(remaining.toFloat())
+        } else {
+            scroll { scrollBy(remaining.toFloat()) }
+        }
+    }
+}
+
+/**
+ * Floating action button shown when the message list is not at the bottom;
+ * tapping scrolls the list back to the bottom.
+ */
+@Composable
+fun BoxScope.ChatScrollToBottomFab(
+    showScrollToBottom: Boolean,
+    scrollScope: CoroutineScope,
+    listState: LazyListState,
+    messages: List<ChatMessage>,
+    streamingMessage: ChatMessage?,
+    isThinking: Boolean,
+) {
+    AnimatedVisibility(
+        visible = showScrollToBottom,
+        enter = fadeIn() + scaleIn(),
+        exit = fadeOut() + scaleOut(),
+        modifier =
+            Modifier
+                .align(Alignment.BottomEnd)
+                .padding(end = 16.dp, bottom = 16.dp),
+    ) {
+        FloatingActionButton(
+            onClick = {
+                scrollScope.launch {
+                    val totalItems =
+                        messages.size +
+                            (if (streamingMessage != null) 1 else 0) +
+                            (if (isThinking) 1 else 0)
+                    if (totalItems > 0) {
+                        listState.scrollToBottom(animated = true)
+                    }
+                }
+            },
+            modifier = Modifier.size(40.dp),
+            containerColor = MaterialTheme.colorScheme.surfaceContainer,
+            contentColor = MaterialTheme.colorScheme.onSurface,
+        ) {
+            Icon(
+                imageVector = Icons.Filled.KeyboardArrowDown,
+                contentDescription = stringResource(R.string.content_desc_scroll_to_bottom),
+            )
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatSearchBar.kt

@@ -0,0 +1,175 @@
+package com.m57.hermescontrol.ui.chat.components
+
+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.Row
+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.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+
+@Composable
+fun CompactSearchInput(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+) {
+    val textColor = MaterialTheme.colorScheme.onSurface
+    val errorColor = MaterialTheme.colorScheme.error
+    val outlineColor = if (isError) errorColor else MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)
+
+    BasicTextField(
+        value = value,
+        onValueChange = onValueChange,
+        modifier =
+            modifier
+                .height(40.dp)
+                .background(
+                    color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
+                    shape = RoundedCornerShape(20.dp),
+                ).border(
+                    width = 1.dp,
+                    color = outlineColor,
+                    shape = RoundedCornerShape(20.dp),
+                ).padding(horizontal = 12.dp),
+        singleLine = true,
+        textStyle = MaterialTheme.typography.bodyMedium.copy(color = textColor),
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
+        decorationBox = { innerTextField ->
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Search,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.size(18.dp),
+                )
+                Box(modifier = Modifier.weight(1f)) {
+                    if (value.isEmpty()) {
+                        Text(
+                            text = stringResource(R.string.chat_search_placeholder),
+                            style = MaterialTheme.typography.bodyMedium,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
+                        )
+                    }
+                    innerTextField()
+                }
+                if (value.isNotEmpty()) {
+                    IconButton(
+                        onClick = { onValueChange("") },
+                        modifier = Modifier.size(20.dp),
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.Close,
+                            contentDescription = stringResource(R.string.chat_clear_search_desc),
+                            modifier = Modifier.size(16.dp),
+                        )
+                    }
+                }
+            }
+        },
+    )
+}
+
+@Composable
+fun SearchBarRow(
+    searchQuery: String,
+    onQueryChange: (String) -> Unit,
+    searchMatchCount: Int,
+    currentMatchIndex: Int,
+    onNavigateUp: () -> Unit,
+    onNavigateDown: () -> Unit,
+    onClose: () -> Unit,
+) {
+    val isError = searchQuery.isNotEmpty() && searchMatchCount == 0
+
+    Row(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .height(48.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        CompactSearchInput(
+            value = searchQuery,
+            onValueChange = onQueryChange,
+            modifier = Modifier.weight(1f),
+            isError = isError,
+        )
+        if (searchQuery.isNotEmpty()) {
+            val countText =
+                if (searchMatchCount > 0) {
+                    "${currentMatchIndex + 1}/$searchMatchCount"
+                } else {
+                    "0/0"
+                }
+            Text(
+                text = countText,
+                style =
+                    MaterialTheme.typography.bodySmall.copy(
+                        color =
+                            if (isError) {
+                                MaterialTheme.colorScheme.error
+                            } else {
+                                MaterialTheme.colorScheme.onSurfaceVariant
+                            },
+                    ),
+                modifier = Modifier.padding(horizontal = 4.dp),
+            )
+        }
+        IconButton(
+            onClick = onNavigateUp,
+            enabled = searchMatchCount > 0,
+            modifier = Modifier.size(36.dp),
+        ) {
+            Icon(
+                Icons.Filled.KeyboardArrowUp,
+                contentDescription = stringResource(R.string.chat_prev_match_desc),
+                modifier = Modifier.size(20.dp),
+            )
+        }
+        IconButton(
+            onClick = onNavigateDown,
+            enabled = searchMatchCount > 0,
+            modifier = Modifier.size(36.dp),
+        ) {
+            Icon(
+                Icons.Filled.KeyboardArrowDown,
+                contentDescription = stringResource(R.string.chat_next_match_desc),
+                modifier = Modifier.size(20.dp),
+            )
+        }
+        IconButton(onClick = onClose, modifier = Modifier.size(36.dp)) {
+            Icon(
+                Icons.Filled.Close,
+                contentDescription = stringResource(R.string.chat_close_search_desc),
+                modifier = Modifier.size(20.dp),
+            )
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatStreaming.kt

@@ -0,0 +1,74 @@
+package com.m57.hermescontrol.ui.chat.components
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
+import com.m57.hermescontrol.ui.chat.ChatBubble
+import com.m57.hermescontrol.ui.chat.ChatMessage
+import kotlinx.coroutines.delay
+
+/**
+ * Wraps a streaming [ChatBubble] with a word-by-word typing reveal effect.
+ * Shows words one at a time at [typingDelayMs] intervals while the message is
+ * still streaming. When streaming completes the full text is shown immediately.
+ * The underlying [ChatMessage.content] in state is never modified — this is a
+ * display-only transformation.
+ */
+@Composable
+fun StreamingBubbleWithTypingEffect(
+    streaming: ChatMessage,
+    typingDelayMs: Int,
+    isDark: Boolean,
+    onAnimationComplete: () -> Unit = {},
+) {
+    var visibleWordCount by remember { mutableIntStateOf(0) }
+    val currentContent = rememberUpdatedState(streaming.content)
+    val currentIsStreaming = rememberUpdatedState(streaming.isStreaming)
+    val currentDelayMs = rememberUpdatedState(typingDelayMs)
+
+    // Timer that ticks at the configured delay, incrementing the visible word
+    // count each tick. Stops ticking when streaming ends, then shows all words.
+    // Optimized: split is only called when waiting for new content, not per tick.
+    LaunchedEffect(Unit) {
+        var wordCount = 0
+        while (true) {
+            if (visibleWordCount < wordCount) {
+                delay(currentDelayMs.value.toLong())
+                visibleWordCount++
+            } else {
+                if (!currentIsStreaming.value) {
+                    onAnimationComplete()
+                    break
+                }
+                // Only split when we need to check for new content arriving
+                val words = currentContent.value.split(" ")
+                wordCount = words.size
+                if (visibleWordCount < wordCount) continue
+                delay(100) // was 10 — reduced from 100Hz to 10Hz
+            }
+        }
+        visibleWordCount = Int.MAX_VALUE
+    }
+
+    // Derive display text from the latest full content at each recomposition
+    val words = streaming.content.split(" ")
+    val visibleCount =
+        if (visibleWordCount >= Int.MAX_VALUE / 2) {
+            words.size
+        } else {
+            visibleWordCount.coerceIn(0, words.size)
+        }
+    val displayText = words.take(visibleCount.coerceAtLeast(1)).joinToString(" ")
+
+    ChatBubble(
+        message = streaming.copy(content = displayText),
+        isDarkTheme = isDark,
+        searchQuery = "",
+        isCurrentMatch = false,
+    )
+}