29df003 · opencode-android

git.iko.soy/opencode-android

UX/UI: back-press confirmation when generating, auto-scroll to new sessions, code block rendering, character counter for long drafts

29df003iko3 months ago

app/src/main/java/soy/iko/opencode/core/OpencodeCore.kt+5

compare with master

unifiedsplit

@@ -124,6 +124,7 @@ class OpencodeCore(

124 connectJob?.cancel()

125 abortJob?.cancel()

126 sendMessageJob?.cancel()

127+ deleteSessionJob?.cancel()

127 loadMessagesJob?.cancel()

128 loadMessagesJob?.cancel()

128 loadMessagesJob = scope.launch { loadMessages(event.id) }

129 loadMessagesJob = scope.launch { loadMessages(event.id) }

129 }

130 }

@@ -291,6 +292,10 @@ class OpencodeCore(

291 when {

292 when {

292 resp.code == 401 -> {

293 resp.code == 401 -> {

293 loading = false

294 loading = false

295+ // A prior connection may have succeeded (connected = true); a

296+ // re-probe returning 401 (e.g. expired credentials) means we're

297+ // no longer authenticated, so drop the connected flag.

298+ connected = false

294 // Always reveal the auth fields so the user can see/edit

299 // Always reveal the auth fields so the user can see/edit

295 // their credentials — even when the ones supplied were wrong.

300 // their credentials — even when the ones supplied were wrong.

296 authRequired = true

301 authRequired = true

app/src/main/java/soy/iko/opencode/ui/OpencodeApp.kt+31−1

@@ -7,13 +7,19 @@ import androidx.compose.animation.slideOutHorizontally

7import androidx.compose.animation.togetherWith

8import androidx.compose.foundation.layout.fillMaxSize

9import androidx.compose.foundation.layout.padding

10+import androidx.compose.material3.AlertDialog

10import androidx.compose.material3.Scaffold

11import androidx.compose.material3.Scaffold

11import androidx.compose.material3.SnackbarDuration

12import androidx.compose.material3.SnackbarDuration

12import androidx.compose.material3.SnackbarHost

13import androidx.compose.material3.SnackbarHost

13import androidx.compose.material3.SnackbarHostState

14import androidx.compose.material3.SnackbarHostState

15+import androidx.compose.material3.Text

16+import androidx.compose.material3.TextButton

14import androidx.compose.runtime.Composable

17import androidx.compose.runtime.Composable

15import androidx.compose.runtime.LaunchedEffect

18import androidx.compose.runtime.LaunchedEffect

19+import androidx.compose.runtime.getValue

20+import androidx.compose.runtime.mutableStateOf

16import androidx.compose.runtime.remember

21import androidx.compose.runtime.remember

22+import androidx.compose.runtime.setValue

17import androidx.compose.ui.Modifier

23import androidx.compose.ui.Modifier

18import soy.iko.opencode.core.Event

24import soy.iko.opencode.core.Event

19import soy.iko.opencode.core.Screen

25import soy.iko.opencode.core.Screen

@@ -25,6 +31,7 @@ import soy.iko.opencode.ui.screens.SessionsScreen

25@Composable

31@Composable

26fun OpencodeApp(state: UiState, dispatch: (Event) -> Unit) {

32fun OpencodeApp(state: UiState, dispatch: (Event) -> Unit) {

27 val snackbar = remember { SnackbarHostState() }

33 val snackbar = remember { SnackbarHostState() }

34+ var showStopConfirm by remember { mutableStateOf(false) }

29 LaunchedEffect(state.error) {

36 LaunchedEffect(state.error) {

30 state.error?.let {

37 state.error?.let {

@@ -40,12 +47,35 @@ fun OpencodeApp(state: UiState, dispatch: (Event) -> Unit) {

41 BackHandler(enabled = state.screen != Screen.Connect) {

48 BackHandler(enabled = state.screen != Screen.Connect) {

42 when (state.screen) {

49 when (state.screen) {

50+ // Leaving mid-generation would silently drop the reply, so confirm first.

43− Screen.Chat -> dispatch(Event.NavigateToSessions)

51+ Screen.Chat -> if (state.generating) showStopConfirm = true else dispatch(Event.NavigateToSessions)

44 Screen.Sessions -> dispatch(Event.NavigateToConnect)

52 Screen.Sessions -> dispatch(Event.NavigateToConnect)

45 Screen.Connect -> Unit

53 Screen.Connect -> Unit

46 }

54 }

47 }

55 }

57+ if (showStopConfirm) {

58+ AlertDialog(

59+ onDismissRequest = { showStopConfirm = false },

60+ title = { Text("Stop generation?") },

61+ text = { Text("Leaving will stop the current generation.") },

62+ confirmButton = {

63+ TextButton(onClick = {

64+ showStopConfirm = false

65+ dispatch(Event.CancelGeneration)

66+ dispatch(Event.NavigateToSessions)

67+ }) {

68+ Text("Stop and leave")

69+ }

70+ },

71+ dismissButton = {

72+ TextButton(onClick = { showStopConfirm = false }) {

73+ Text("Stay")

74+ }

75+ },

76+ )

77+ }

78+

49 Scaffold(snackbarHost = { SnackbarHost(snackbar) }) { padding ->

79 Scaffold(snackbarHost = { SnackbarHost(snackbar) }) { padding ->

50 AnimatedContent(

80 AnimatedContent(

51 targetState = state.screen,

81 targetState = state.screen,

app/src/main/java/soy/iko/opencode/ui/components/MessageBubble.kt+30−6

@@ -47,6 +47,7 @@ import androidx.compose.ui.text.LinkAnnotation

47import androidx.compose.ui.text.SpanStyle

48import androidx.compose.ui.text.TextLinkStyles

49import androidx.compose.ui.text.buildAnnotatedString

50+import androidx.compose.ui.text.font.FontFamily

50import androidx.compose.ui.text.font.FontStyle

51import androidx.compose.ui.text.font.FontStyle

51import androidx.compose.ui.text.withLink

52import androidx.compose.ui.text.withLink

52import androidx.compose.ui.text.withStyle

53import androidx.compose.ui.text.withStyle

@@ -131,8 +132,9 @@ fun MessageBubble(message: MessageView, modifier: Modifier = Modifier, onRetry:

131 SelectionContainer {

132 SelectionContainer {

132 if (message.text.isNotEmpty()) {

133 if (message.text.isNotEmpty()) {

133 val linkColor = MaterialTheme.colorScheme.primary

134 val linkColor = MaterialTheme.colorScheme.primary

135+ val codeBackground = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)

134− val annotatedText = remember(message.text, message.streaming, linkColor) {

136+ val annotatedText = remember(message.text, message.streaming, linkColor, codeBackground, context) {

135− buildLinkedText(message.text, message.streaming, linkColor, context)

137+ buildLinkedText(message.text, message.streaming, linkColor, codeBackground, context)

136 }

138 }

137 Text(

139 Text(

138 text = annotatedText,

140 text = annotatedText,

@@ -174,16 +176,39 @@ private fun copyToClipboard(context: Context, text: String) {

174private val urlRegex = Regex("""https?://[^\s]+""")

176private val urlRegex = Regex("""https?://[^\s]+""")

175

177

176/**

178/**

177− * Render [text] as an AnnotatedString where each http(s) URL becomes a clickable link

179+ * Render [text] as an AnnotatedString. Triple-backtick fences split the text into

178− * that opens in the browser. Falls back to plain text when no URLs are present. The

180+ * prose and code segments: code segments are rendered monospace on a tinted

181+ * [codeBackground] (fences dropped), while prose has each http(s) URL turned into a

179− * streaming cursor (" ▌") is appended outside any link annotation.

182+ * clickable link. The streaming cursor (" ▌") is appended outside any annotation.

180 */

183 */

181private fun buildLinkedText(

184private fun buildLinkedText(

182 text: String,

185 text: String,

183 streaming: Boolean,

186 streaming: Boolean,

184 linkColor: Color,

187 linkColor: Color,

188+ codeBackground: Color,

185 context: Context,

189 context: Context,

186): AnnotatedString = buildAnnotatedString {

190): AnnotatedString = buildAnnotatedString {

191+ // Odd-indexed segments sit between a pair of ``` fences, so they're code. An

192+ // unclosed fence leaves the trailing segment styled as code, mirroring markdown.

193+ val segments = text.split("```")

194+ segments.forEachIndexed { index, segment ->

195+ if (index % 2 == 1) {

196+ withStyle(SpanStyle(fontFamily = FontFamily.Monospace, background = codeBackground)) {

197+ append(segment)

198+ }

199+ } else {

200+ appendLinkedText(segment, linkColor, context)

201+ }

202+ }

203+ if (streaming) append(" ▌")

204+}

205+

206+/** Append [text] to the builder, turning each http(s) URL into a clickable link. */

207+private fun AnnotatedString.Builder.appendLinkedText(

208+ text: String,

209+ linkColor: Color,

210+ context: Context,

211+) {

187 val matches = urlRegex.findAll(text).toList()

212 val matches = urlRegex.findAll(text).toList()

188 var cursor = 0

213 var cursor = 0

189 for (match in matches) {

214 for (match in matches) {

@@ -207,7 +232,6 @@ private fun buildLinkedText(

207 cursor = match.range.last + 1

232 cursor = match.range.last + 1

208 }

233 }

209 append(text.substring(cursor))

234 append(text.substring(cursor))

210− if (streaming) append(" ▌")

211}

235}

212

236

213private fun shareText(context: Context, text: String) {

237private fun shareText(context: Context, text: String) {

app/src/main/java/soy/iko/opencode/ui/screens/ChatScreen.kt+15

@@ -455,6 +455,21 @@ private fun ChatInputBar(

455 enabled = !loading,

456 placeholder = { Text("Message opencode…") },

457 maxLines = 5,

458+ // Surface a running count once the draft gets long, so the user has a

459+ // sense of scale before sending a wall of text.

460+ supportingText = if (draft.length > 500) {

461+ {

462+ Text(

463+ text = "${draft.length} characters",

464+ style = MaterialTheme.typography.labelSmall,

465+ color = MaterialTheme.colorScheme.onSurfaceVariant,

466+ textAlign = TextAlign.End,

467+ modifier = Modifier.fillMaxWidth(),

468+ )

469+ }

470+ } else {

471+ null

472+ },

458 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),

473 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),

459 keyboardActions = KeyboardActions(onSend = {

474 keyboardActions = KeyboardActions(onSend = {

460 if (!generating && !loading && draft.isNotBlank()) onSend()

475 if (!generating && !loading && draft.isNotBlank()) onSend()

app/src/main/java/soy/iko/opencode/ui/screens/SessionsScreen.kt+11

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.padding

21import androidx.compose.foundation.layout.size

22import androidx.compose.foundation.lazy.LazyColumn

23import androidx.compose.foundation.lazy.items

24+import androidx.compose.foundation.lazy.rememberLazyListState

24import androidx.compose.material.icons.Icons

25import androidx.compose.material.icons.Icons

25import androidx.compose.material.icons.automirrored.filled.ArrowBack

26import androidx.compose.material.icons.automirrored.filled.ArrowBack

26import androidx.compose.material.icons.filled.Add

27import androidx.compose.material.icons.filled.Add

@@ -72,6 +73,15 @@ fun SessionsScreen(state: UiState, dispatch: (Event) -> Unit) {

72 var pendingDeleteId by remember { mutableStateOf<String?>(null) }

73 var pendingDeleteId by remember { mutableStateOf<String?>(null) }

73 var isPullRefreshing by remember { mutableStateOf(false) }

74 var isPullRefreshing by remember { mutableStateOf(false) }

74 var searchQuery by remember { mutableStateOf("") }

75 var searchQuery by remember { mutableStateOf("") }

76+ val sessionsListState = rememberLazyListState()

77+

78+ // Bring a newly created session (which lands at the top of the list) into view.

79+ // Only scroll when the list actually grows, not on every reload of the same sessions.

80+ var prevSize by remember { mutableStateOf(state.sessions.size) }

81+ LaunchedEffect(state.sessions.size) {

82+ if (state.sessions.size > prevSize) sessionsListState.animateScrollToItem(0)

83+ prevSize = state.sessions.size

84+ }

76 // The pull-to-refresh spinner should only reflect a user-initiated pull, not

86 // The pull-to-refresh spinner should only reflect a user-initiated pull, not

77 // every loading operation. Clear it once the underlying load completes.

87 // every loading operation. Clear it once the underlying load completes.

@@ -169,6 +179,7 @@ fun SessionsScreen(state: UiState, dispatch: (Event) -> Unit) {

169 state = rememberPullToRefreshState(),

179 state = rememberPullToRefreshState(),

170 ) {

180 ) {

171 LazyColumn(

181 LazyColumn(

182+ state = sessionsListState,

172 modifier = Modifier.fillMaxSize(),

183 modifier = Modifier.fillMaxSize(),

173 contentPadding = PaddingValues(bottom = 88.dp),

184 contentPadding = PaddingValues(bottom = 88.dp),

174 ) {

185 ) {