@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.Row
26import androidx.compose.foundation.layout.Spacer
26import androidx.compose.foundation.layout.Spacer
27import androidx.compose.foundation.layout.fillMaxSize
27import androidx.compose.foundation.layout.fillMaxSize
28import androidx.compose.foundation.layout.fillMaxWidth
28import androidx.compose.foundation.layout.fillMaxWidth
29+import androidx.compose.foundation.layout.heightIn
29import androidx.compose.foundation.layout.PaddingValues
30import androidx.compose.foundation.layout.PaddingValues
30import androidx.compose.foundation.layout.WindowInsets
31import androidx.compose.foundation.layout.WindowInsets
31import androidx.compose.foundation.layout.ime
32import androidx.compose.foundation.layout.ime
@@ -45,6 +46,7 @@ import androidx.compose.material.icons.automirrored.filled.Send
45import androidx.compose.material.icons.filled.ChatBubbleOutline
46import androidx.compose.material.icons.filled.ChatBubbleOutline
46import androidx.compose.material.icons.filled.Close
47import androidx.compose.material.icons.filled.Close
47import androidx.compose.material.icons.filled.KeyboardArrowDown
48import androidx.compose.material.icons.filled.KeyboardArrowDown
49+import androidx.compose.material.icons.filled.KeyboardArrowUp
48import androidx.compose.material.icons.filled.Stop
50import androidx.compose.material.icons.filled.Stop
49import androidx.compose.material3.CircularProgressIndicator
51import androidx.compose.material3.CircularProgressIndicator
50import androidx.compose.material3.ExperimentalMaterial3Api
52import androidx.compose.material3.ExperimentalMaterial3Api
@@ -59,6 +61,7 @@ import androidx.compose.material3.OutlinedTextField
59import androidx.compose.material3.Scaffold
61import androidx.compose.material3.Scaffold
60import androidx.compose.material3.Surface
62import androidx.compose.material3.Surface
61import androidx.compose.material3.Text
63import androidx.compose.material3.Text
64+import androidx.compose.material3.TextButton
62import androidx.compose.material3.TopAppBar
65import androidx.compose.material3.TopAppBar
63import androidx.compose.runtime.Composable
66import androidx.compose.runtime.Composable
64import androidx.compose.runtime.LaunchedEffect
67import androidx.compose.runtime.LaunchedEffect
@@ -72,6 +75,7 @@ import androidx.compose.ui.Alignment
72import androidx.compose.ui.Modifier
75import androidx.compose.ui.Modifier
73import androidx.compose.ui.draw.clip
76import androidx.compose.ui.draw.clip
74import androidx.compose.ui.hapticfeedback.HapticFeedbackType
77import androidx.compose.ui.hapticfeedback.HapticFeedbackType
78+import androidx.compose.ui.platform.LocalClipboardManager
75import androidx.compose.ui.platform.LocalContext
79import androidx.compose.ui.platform.LocalContext
76import androidx.compose.ui.platform.LocalDensity
80import androidx.compose.ui.platform.LocalDensity
77import androidx.compose.ui.platform.LocalHapticFeedback
81import androidx.compose.ui.platform.LocalHapticFeedback
@@ -109,6 +113,12 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
116+ // Offer a jump-to-top shortcut once the conversation is long and the user has
117+ // scrolled a few messages down — saves flick-scrolling back through history.
118+ val showScrollTop by remember {
119+ derivedStateOf { state.messages.size > 10 && listState.firstVisibleItemIndex > 3 }
112 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
122 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
113 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
123 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
114 var lastSeenCount by remember { mutableStateOf(0) }
124 var lastSeenCount by remember { mutableStateOf(0) }
@@ -259,6 +269,14 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
273+ visible = showScrollTop,
275+ coroutineScope.launch {
276+ listState.animateScrollToItem(0)
@@ -298,6 +316,30 @@ private fun BoxScope.ScrollToBottomButton(visible: Boolean, showBadge: Boolean,
319+// Mirror of ScrollToBottomButton, pinned to the top-start corner. Same BoxScope
320+// extension trick so the top-level AnimatedVisibility overload resolves cleanly.
322+private fun BoxScope.ScrollToTopButton(visible: Boolean, onClick: () -> Unit) {
325+ modifier = Modifier.align(Alignment.TopStart),
326+ enter = scaleIn() + fadeIn(),
327+ exit = scaleOut() + fadeOut(),
329+ Box(Modifier.padding(16.dp)) {
330+ FloatingActionButton(
332+ modifier = Modifier.size(44.dp),
335+ Icons.Filled.KeyboardArrowUp,
336+ contentDescription = "Scroll to top",
301private fun copyToClipboard(context: Context, text: String) {
343private fun copyToClipboard(context: Context, text: String) {
302 val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
344 val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
303 clipboard.setPrimaryClip(ClipData.newPlainText("session", text))
345 clipboard.setPrimaryClip(ClipData.newPlainText("session", text))
@@ -455,19 +497,41 @@ private fun ChatInputBar(
455 onStop: () -> Unit,
497 onStop: () -> Unit,
457 val haptic = LocalHapticFeedback.current
499 val haptic = LocalHapticFeedback.current
500+ val clipboardManager = LocalClipboardManager.current
458 Surface(tonalElevation = 3.dp) {
501 Surface(tonalElevation = 3.dp) {
460 modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
503 modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
506+ modifier = Modifier.fillMaxWidth(),
461 verticalAlignment = Alignment.Bottom,
507 verticalAlignment = Alignment.Bottom,
462 horizontalArrangement = Arrangement.spacedBy(8.dp),
508 horizontalArrangement = Arrangement.spacedBy(8.dp),
464 OutlinedTextField(
510 OutlinedTextField(
465 value = draft,
511 value = draft,
466 onValueChange = onDraftChange,
512 onValueChange = onDraftChange,
467− modifier = Modifier.weight(1f),
513+ modifier = Modifier.weight(1f).heightIn(min = 48.dp),
468 enabled = !loading,
514 enabled = !loading,
469 placeholder = { Text("Message opencode…") },
515 placeholder = { Text("Message opencode…") },
470 maxLines = 5,
516 maxLines = 5,
517+ // Offer a quick way to wipe the draft once there's something to clear
518+ // and we're not mid-generation (where the field is a poor place to fuss).
519+ trailingIcon = if (draft.isNotEmpty() && !generating) {
522+ onClick = { onDraftChange("") },
523+ modifier = Modifier.size(20.dp),
527+ contentDescription = "Clear draft",
528+ modifier = Modifier.size(16.dp),
471 // Surface a running count once the draft gets long, so the user has a
535 // Surface a running count once the draft gets long, so the user has a
472 // sense of scale before sending a wall of text.
536 // sense of scale before sending a wall of text.
473 supportingText = if (draft.length > 500) {
537 supportingText = if (draft.length > 500) {
@@ -510,5 +574,17 @@ private fun ChatInputBar(
577+ // With nothing typed yet, offer a one-tap way to drop in clipboard contents.
578+ if (draft.isEmpty() && !generating && !loading) {
581+ clipboardManager.getText()?.text?.let { onDraftChange(it) }
583+ contentPadding = PaddingValues(0.dp),