ab6a5da · opencode-android

git.iko.soy/opencode-android

on master help sign in

UX/UI: connection status dot, italic text support, scroll-to-top button, input min height

ab6a5daiko3 months ago

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

unifiedsplit

@@ -23,6 +23,9 @@ class CoreViewModel(app: Application) : AndroidViewModel(app) {

23 init {

24 prefs.getString(KEY_URL, null)?.let { core.dispatch(Event.ServerUrlChanged(it)) }

25 prefs.getString(KEY_USER, null)?.let { core.dispatch(Event.UsernameChanged(it)) }

26+ // The password is stored in plain text in SharedPreferences — a deliberate

27+ // convenience trade-off for a local dev tool so reconnecting is one tap.

28+ prefs.getString(KEY_PASSWORD, null)?.let { core.dispatch(Event.PasswordChanged(it)) }

27 // On a fresh process after a configuration change, resume the SSE stream if

30 // On a fresh process after a configuration change, resume the SSE stream if

28 // the core is already connected (no-op otherwise — it guards on `connected`).

31 // the core is already connected (no-op otherwise — it guards on `connected`).

@@ -44,6 +47,7 @@ class CoreViewModel(app: Application) : AndroidViewModel(app) {

44 prefs.edit {

47 prefs.edit {

45 putString(KEY_URL, state.serverUrl)

48 putString(KEY_URL, state.serverUrl)

46 putString(KEY_USER, state.username)

49 putString(KEY_USER, state.username)

50+ putString(KEY_PASSWORD, state.password)

47 }

51 }

48 }

52 }

49 }

53 }

@@ -57,5 +61,6 @@ class CoreViewModel(app: Application) : AndroidViewModel(app) {

57 private companion object {

61 private companion object {

58 const val KEY_URL = "serverUrl"

62 const val KEY_URL = "serverUrl"

59 const val KEY_USER = "username"

63 const val KEY_USER = "username"

64+ const val KEY_PASSWORD = "password"

60 }

65 }

61}

66}

app/src/main/java/soy/iko/opencode/core/OpencodeCore.kt+12−1

@@ -236,7 +236,18 @@ class OpencodeCore(

236 if (connected && sse == null) startSse()

237 }

238

239− fun shutdown() = closeSse()

239+ fun shutdown() {

240+ // Cancel every tracked coroutine before tearing down the stream so none can

241+ // emit into a cancelled scope after the ViewModel is cleared.

242+ connectJob?.cancel()

243+ loadSessionsJob?.cancel()

244+ createSessionJob?.cancel()

245+ loadMessagesJob?.cancel()

246+ deleteSessionJob?.cancel()

247+ sendMessageJob?.cancel()

248+ abortJob?.cancel()

249+ closeSse()

250+ }

240

251

241 // ── Effects ────────────────────────────────────────────────────────────────

252 // ── Effects ────────────────────────────────────────────────────────────────

242 private fun sendMessage(raw: String) {

253 private fun sendMessage(raw: String) {

app/src/main/java/soy/iko/opencode/ui/components/MessageBubble.kt+44−2

@@ -232,13 +232,50 @@ private fun AnnotatedString.Builder.appendLinkedText(

232 // Bold is the outermost inline layer: split on ** first so a bold span can wrap

233 // inline code and links inside it. Odd-indexed segments sit between a pair of **

234 // markers, so they're bold (markers dropped); even segments are ordinary prose.

235+ // Only the non-bold (even) segments get single-* italic handling — splitting a bold

236+ // segment on "*" would misfire on the leftover asterisks from the ** markers.

235 val segments = text.split("**")

237 val segments = text.split("**")

238+ // An even segment count means an odd number of ** markers, so the final ** is unclosed:

239+ // its trailing segment isn't bold. Restore the literal ** and render it as ordinary prose.

240+ val unclosed = segments.size % 2 == 0

236 segments.forEachIndexed { index, segment ->

241 segments.forEachIndexed { index, segment ->

242+ val isUnclosedTail = unclosed && index == segments.size - 1

237− if (index % 2 == 1) {

243+ if (index % 2 == 1 && !isUnclosedTail) {

238 withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {

244 withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {

239 appendInlineCode(segment, linkColor, codeBackground, context)

245 appendInlineCode(segment, linkColor, codeBackground, context)

240 }

246 }

241 } else {

247 } else {

248+ if (isUnclosedTail) append("**")

249+ appendItalicText(segment, linkColor, codeBackground, context)

250+ }

251+ }

252+}

253+

254+/**

255+ * Append [text] to the builder, rendering single-asterisk pairs as italic. Double

256+ * asterisks are already consumed as bold upstream in [appendLinkedText], so only lone

257+ * `*` markers reach here. Each segment then flows through inline-code and URL handling.

258+ */

259+private fun AnnotatedString.Builder.appendItalicText(

260+ text: String,

261+ linkColor: Color,

262+ codeBackground: Color,

263+ context: Context,

264+) {

265+ // Odd-indexed segments sit between a pair of single asterisks, so they're italic

266+ // (markers dropped); even segments are ordinary prose.

267+ val segments = text.split("*")

268+ // An even segment count means an odd number of * markers, so the final * is unclosed:

269+ // its trailing segment isn't italic. Restore the literal * and render it as prose.

270+ val unclosed = segments.size % 2 == 0

271+ segments.forEachIndexed { index, segment ->

272+ val isUnclosedTail = unclosed && index == segments.size - 1

273+ if (index % 2 == 1 && !isUnclosedTail) {

274+ withStyle(SpanStyle(fontStyle = FontStyle.Italic)) {

275+ appendInlineCode(segment, linkColor, codeBackground, context)

276+ }

277+ } else {

278+ if (isUnclosedTail) append("*")

242 appendInlineCode(segment, linkColor, codeBackground, context)

279 appendInlineCode(segment, linkColor, codeBackground, context)

243 }

280 }

244 }

281 }

@@ -258,12 +295,17 @@ private fun AnnotatedString.Builder.appendInlineCode(

258 // Odd-indexed segments sit between a pair of single backticks, so they're inline

295 // Odd-indexed segments sit between a pair of single backticks, so they're inline

259 // code. Even segments are ordinary prose and get URL linking applied.

296 // code. Even segments are ordinary prose and get URL linking applied.

260 val segments = text.split("`")

297 val segments = text.split("`")

298+ // An even segment count means an odd number of backtick markers, so the final backtick

299+ // is unclosed: its trailing segment isn't code. Restore the literal ` and treat as prose.

300+ val unclosed = segments.size % 2 == 0

261 segments.forEachIndexed { index, segment ->

301 segments.forEachIndexed { index, segment ->

302+ val isUnclosedTail = unclosed && index == segments.size - 1

262− if (index % 2 == 1) {

303+ if (index % 2 == 1 && !isUnclosedTail) {

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

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

264 append(segment)

305 append(segment)

265 }

306 }

266 } else {

307 } else {

308+ if (isUnclosedTail) append("`")

267 appendUrls(segment, linkColor, context)

309 appendUrls(segment, linkColor, context)

268 }

310 }

269 }

311 }

app/src/main/java/soy/iko/opencode/ui/screens/ChatScreen.kt+41−1

@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.Row

26import androidx.compose.foundation.layout.Spacer

27import androidx.compose.foundation.layout.fillMaxSize

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

@@ -111,6 +113,12 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {

111 }

113 }

112 }

114 }

113

115

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 }

120+ }

121+

114 // 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

115 // 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.

116 var lastSeenCount by remember { mutableStateOf(0) }

124 var lastSeenCount by remember { mutableStateOf(0) }

@@ -261,6 +269,14 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {

261 }

269 }

262 },

270 },

263 )

271 )

272+ ScrollToTopButton(

273+ visible = showScrollTop,

274+ onClick = {

275+ coroutineScope.launch {

276+ listState.animateScrollToItem(0)

277+ }

278+ },

279+ )

264 }

280 }

265 }

281 }

266 }

282 }

@@ -300,6 +316,30 @@ private fun BoxScope.ScrollToBottomButton(visible: Boolean, showBadge: Boolean,

300 }

316 }

301}

317}

302

318

319+// Mirror of ScrollToBottomButton, pinned to the top-start corner. Same BoxScope

320+// extension trick so the top-level AnimatedVisibility overload resolves cleanly.

321+@Composable

322+private fun BoxScope.ScrollToTopButton(visible: Boolean, onClick: () -> Unit) {

323+ AnimatedVisibility(

324+ visible = visible,

325+ modifier = Modifier.align(Alignment.TopStart),

326+ enter = scaleIn() + fadeIn(),

327+ exit = scaleOut() + fadeOut(),

328+ ) {

329+ Box(Modifier.padding(16.dp)) {

330+ FloatingActionButton(

331+ onClick = onClick,

332+ modifier = Modifier.size(44.dp),

333+ ) {

334+ Icon(

335+ Icons.Filled.KeyboardArrowUp,

336+ contentDescription = "Scroll to top",

337+ )

338+ }

339+ }

340+ }

341+}

342+

303private fun copyToClipboard(context: Context, text: String) {

343private fun copyToClipboard(context: Context, text: String) {

304 val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager

344 val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager

305 clipboard.setPrimaryClip(ClipData.newPlainText("session", text))

345 clipboard.setPrimaryClip(ClipData.newPlainText("session", text))

@@ -470,7 +510,7 @@ private fun ChatInputBar(

470 OutlinedTextField(

510 OutlinedTextField(

471 value = draft,

511 value = draft,

472 onValueChange = onDraftChange,

512 onValueChange = onDraftChange,

473− modifier = Modifier.weight(1f),

513+ modifier = Modifier.weight(1f).heightIn(min = 48.dp),

474 enabled = !loading,

514 enabled = !loading,

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

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

476 maxLines = 5,

516 maxLines = 5,

app/src/main/java/soy/iko/opencode/ui/screens/SessionsScreen.kt+20−1

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.size

22import androidx.compose.foundation.lazy.LazyColumn

23import androidx.compose.foundation.lazy.items

24import androidx.compose.foundation.lazy.rememberLazyListState

25+import androidx.compose.foundation.shape.CircleShape

25import androidx.compose.material.icons.Icons

26import androidx.compose.material.icons.Icons

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

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

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

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

@@ -57,6 +58,8 @@ import androidx.compose.runtime.remember

57import androidx.compose.runtime.setValue

58import androidx.compose.runtime.setValue

58import androidx.compose.ui.Alignment

59import androidx.compose.ui.Alignment

59import androidx.compose.ui.Modifier

60import androidx.compose.ui.Modifier

61+import androidx.compose.ui.draw.clip

62+import androidx.compose.ui.graphics.Color

60import androidx.compose.ui.hapticfeedback.HapticFeedbackType

63import androidx.compose.ui.hapticfeedback.HapticFeedbackType

61import androidx.compose.ui.platform.LocalContext

64import androidx.compose.ui.platform.LocalContext

62import androidx.compose.ui.platform.LocalHapticFeedback

65import androidx.compose.ui.platform.LocalHapticFeedback

@@ -116,7 +119,23 @@ fun SessionsScreen(state: UiState, dispatch: (Event) -> Unit) {

116 Scaffold(

119 Scaffold(

117 topBar = {

120 topBar = {

118 TopAppBar(

121 TopAppBar(

122+ title = {

123+ Row(verticalAlignment = Alignment.CenterVertically) {

124+ // A quick at-a-glance health dot for the SSE stream: green when

125+ // connected, error-tinted when the stream is down (updates stall).

126+ Box(

127+ modifier = Modifier

128+ .size(8.dp)

129+ .clip(CircleShape)

130+ .background(

131+ if (state.sseConnected) Color(0xFF4CAF50)

132+ else MaterialTheme.colorScheme.error,

133+ ),

134+ )

135+ Spacer(Modifier.size(8.dp))

119− title = { Text(if (state.sessions.isNotEmpty()) "Sessions (${state.sessions.size})" else "Sessions") },

136+ Text(if (state.sessions.isNotEmpty()) "Sessions (${state.sessions.size})" else "Sessions")

137+ }

138+ },

120 navigationIcon = {

139 navigationIcon = {

121 IconButton(onClick = { dispatch(Event.NavigateToConnect) }) {

140 IconButton(onClick = { dispatch(Event.NavigateToConnect) }) {

122 Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Disconnect")

141 Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Disconnect")