94e3824 · opencode-android

git.iko.soy/opencode-android

on master help sign in

UX/UI: scroll-to-bottom FAB, SSE reconnection banner, collapsible tool rows, friendlier session IDs

94e3824iko3 months ago

app/src/main/java/soy/iko/opencode/core/OpencodeCore.kt+17−4

compare with master

unifiedsplit

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

29 private var username = ""

30 private var password = ""

31 private var authRequired = false

32− private var authed = false

33 private var connected = false

32 private var connected = false

34 private var loading = false

33 private var loading = false

35 private var error: String? = null

34 private var error: String? = null

@@ -40,6 +39,7 @@ class OpencodeCore(

40 private val messages = mutableListOf<MsgState>()

39 private val messages = mutableListOf<MsgState>()

41 private var draft = ""

40 private var draft = ""

42 private var generating = false

41 private var generating = false

42+ private var sseConnected = true

43 private var localSeq = 0L

45 private val _view = MutableStateFlow(snapshot())

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

85 val id = event.id

86 // Delete on the server first; only drop it from the UI once that

87 // succeeds, so a failed request leaves the session recoverable.

88+ loading = true; emit()

88 scope.launch {

89 scope.launch {

89 http.delete("$serverUrl/session/$id", authHeader()).fold(

90 http.delete("$serverUrl/session/$id", authHeader()).fold(

90 onSuccess = { resp ->

91 onSuccess = { resp ->

@@ -98,8 +99,12 @@ class OpencodeCore(

98 } else {

99 } else {

99 error = "Failed to delete session"

100 error = "Failed to delete session"

100 }

101 }

102+ loading = false

103+ },

104+ onFailure = {

105+ error = "Failed to delete session"

106+ loading = false

101 },

107 },

102− onFailure = { error = "Failed to delete session" },

103 )

108 )

104 emit()

109 emit()

105 }

110 }

@@ -120,6 +125,7 @@ class OpencodeCore(

120 currentSessionId = null

125 currentSessionId = null

121 messages.clear()

126 messages.clear()

122 generating = false

127 generating = false

128+ loading = true

123 emit()

129 emit()

124 scope.launch { loadSessions() }

130 scope.launch { loadSessions() }

125 }

131 }

@@ -127,6 +133,7 @@ class OpencodeCore(

127 Event.NavigateToConnect -> {

133 Event.NavigateToConnect -> {

128 screen = Screen.Connect

134 screen = Screen.Connect

129 connected = false

135 connected = false

136+ loading = false

130 sessions.clear()

137 sessions.clear()

131 messages.clear()

138 messages.clear()

132 currentSessionId = null

139 currentSessionId = null

@@ -195,7 +202,6 @@ class OpencodeCore(

195 emit()

202 emit()

196 }

203 }

197 resp.code in 200..299 -> {

204 resp.code in 200..299 -> {

198− if (hasCreds) authed = true

199 connected = true

205 connected = true

200 authRequired = false

206 authRequired = false

201 error = null

207 error = null

@@ -288,7 +294,13 @@ class OpencodeCore(

288 url = "$serverUrl/event",

294 url = "$serverUrl/event",

289 auth = authHeader(),

295 auth = authHeader(),

290 onEvent = { json -> scope.launch { handleServerEvent(json) } },

296 onEvent = { json -> scope.launch { handleServerEvent(json) } },

297+ onStateChange = { open ->

298+ scope.launch {

299+ sseConnected = open

291− onStateChange = { open -> if (open) reconnectAttempts = 0 else scheduleReconnect() },

300+ if (open) reconnectAttempts = 0 else scheduleReconnect()

301+ emit()

302+ }

303+ },

292 )

304 )

293 sse = client

305 sse = client

294 client.connect()

306 client.connect()

@@ -405,6 +417,7 @@ class OpencodeCore(

405 messages = messages.map { it.toView() },

417 messages = messages.map { it.toView() },

406 draft = draft,

418 draft = draft,

407 generating = generating,

419 generating = generating,

420+ sseConnected = sseConnected,

408 )

421 )

409

422

410 private fun emit() { _view.value = snapshot() }

423 private fun emit() { _view.value = snapshot() }

app/src/main/java/soy/iko/opencode/core/ViewModel.kt+1

@@ -48,6 +48,7 @@ data class UiState(

48 val messages: List<MessageView> = emptyList(),

49 val draft: String = "",

50 val generating: Boolean = false,

51+ val sseConnected: Boolean = true,

51)

52)

53/**

54/**

app/src/main/java/soy/iko/opencode/ui/components/MessageBubble.kt+16−3

@@ -35,6 +35,7 @@ import androidx.compose.ui.draw.clip

35import androidx.compose.ui.graphics.Color

36import androidx.compose.ui.platform.LocalContext

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

38+import androidx.compose.ui.text.style.TextOverflow

38import androidx.compose.ui.unit.dp

39import androidx.compose.ui.unit.dp

39import java.text.SimpleDateFormat

40import java.text.SimpleDateFormat

40import java.util.Date

41import java.util.Date

@@ -150,9 +151,13 @@ private fun ReasoningBlock(text: String) {

150

151

151@Composable

152@Composable

152private fun ToolRow(tool: ToolView) {

153private fun ToolRow(tool: ToolView) {

154+ var expanded by remember { mutableStateOf(false) }

153 Row(

155 Row(

154 verticalAlignment = Alignment.CenterVertically,

156 verticalAlignment = Alignment.CenterVertically,

155− modifier = Modifier.padding(bottom = 6.dp),

157+ modifier = Modifier

158+ .fillMaxWidth()

159+ .clickable { expanded = !expanded }

160+ .padding(bottom = 6.dp),

156 ) {

161 ) {

157 Icon(

162 Icon(

158 Icons.Filled.Build,

163 Icons.Filled.Build,

@@ -165,11 +170,19 @@ private fun ToolRow(tool: ToolView) {

165 append(tool.name)

170 append(tool.name)

166 append(" · ")

171 append(" · ")

167 append(tool.status)

172 append(tool.status)

168− tool.title?.let { append(" — "); append(it) }

173+ if (expanded) tool.title?.let { append(" — "); append(it) }

169 },

174 },

170 style = MonoStyle,

175 style = MonoStyle,

171 color = MaterialTheme.colorScheme.onSurfaceVariant,

176 color = MaterialTheme.colorScheme.onSurfaceVariant,

172− maxLines = 3,

177+ maxLines = if (expanded) Int.MAX_VALUE else 1,

178+ overflow = TextOverflow.Ellipsis,

179+ modifier = Modifier.weight(1f),

180+ )

181+ Icon(

182+ imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,

183+ contentDescription = if (expanded) "Collapse tool details" else "Expand tool details",

184+ tint = MaterialTheme.colorScheme.onSurfaceVariant,

185+ modifier = Modifier.padding(start = 2.dp).widthIn(max = 18.dp),

173 )

186 )

174 }

187 }

175}

188}

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

@@ -16,10 +16,12 @@ import androidx.compose.foundation.lazy.rememberLazyListState

16import androidx.compose.material.icons.Icons

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

18import androidx.compose.material.icons.automirrored.filled.Send

19+import androidx.compose.material.icons.filled.KeyboardArrowDown

19import androidx.compose.material.icons.filled.Stop

20import androidx.compose.material.icons.filled.Stop

20import androidx.compose.material3.CircularProgressIndicator

21import androidx.compose.material3.CircularProgressIndicator

21import androidx.compose.material3.ExperimentalMaterial3Api

22import androidx.compose.material3.ExperimentalMaterial3Api

22import androidx.compose.material3.FilledIconButton

23import androidx.compose.material3.FilledIconButton

24+import androidx.compose.material3.FloatingActionButton

23import androidx.compose.material3.Icon

25import androidx.compose.material3.Icon

24import androidx.compose.material3.IconButton

26import androidx.compose.material3.IconButton

25import androidx.compose.material3.MaterialTheme

27import androidx.compose.material3.MaterialTheme

@@ -30,10 +32,15 @@ import androidx.compose.material3.Text

30import androidx.compose.material3.TopAppBar

32import androidx.compose.material3.TopAppBar

31import androidx.compose.runtime.Composable

33import androidx.compose.runtime.Composable

32import androidx.compose.runtime.LaunchedEffect

34import androidx.compose.runtime.LaunchedEffect

35+import androidx.compose.runtime.derivedStateOf

36+import androidx.compose.runtime.getValue

37+import androidx.compose.runtime.remember

38+import androidx.compose.runtime.rememberCoroutineScope

33import androidx.compose.ui.Alignment

39import androidx.compose.ui.Alignment

34import androidx.compose.ui.Modifier

40import androidx.compose.ui.Modifier

35import androidx.compose.ui.text.style.TextOverflow

41import androidx.compose.ui.text.style.TextOverflow

36import androidx.compose.ui.unit.dp

42import androidx.compose.ui.unit.dp

43+import kotlinx.coroutines.launch

37import soy.iko.opencode.core.Event

44import soy.iko.opencode.core.Event

38import soy.iko.opencode.core.UiState

45import soy.iko.opencode.core.UiState

39import soy.iko.opencode.ui.components.MessageBubble

46import soy.iko.opencode.ui.components.MessageBubble

@@ -42,6 +49,19 @@ import soy.iko.opencode.ui.components.MessageBubble

42@Composable

49@Composable

43fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {

50fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {

44 val listState = rememberLazyListState()

51 val listState = rememberLazyListState()

52+ val coroutineScope = rememberCoroutineScope()

53+

54+ // Show a jump-to-bottom button once the user scrolls up away from the latest

55+ // message. derivedStateOf keeps this from recomposing on every pixel of scroll —

56+ // it only flips when the near-bottom threshold is actually crossed.

57+ val showScrollButton by remember {

58+ derivedStateOf {

59+ val layoutInfo = listState.layoutInfo

60+ val lastVisibleIndex = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0

61+ val totalItems = layoutInfo.totalItemsCount

62+ totalItems > 0 && lastVisibleIndex < totalItems - 3

63+ }

64+ }

46 // Keep the newest content in view as it streams in, but only when the user is

66 // Keep the newest content in view as it streams in, but only when the user is

47 // already near the bottom. If they've scrolled up to read history, leave it alone.

67 // already near the bottom. If they've scrolled up to read history, leave it alone.

@@ -93,28 +113,78 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {

93 )

113 )

94 },

114 },

95 ) { padding ->

115 ) { padding ->

96− Box(Modifier.fillMaxSize().padding(padding)) {

116+ Column(Modifier.fillMaxSize().padding(padding)) {

97− if (state.messages.isEmpty() && !state.loading) {

117+ if (!state.sseConnected && !state.generating) {

98− Text(

118+ ReconnectingBanner()

99− text = "Send a message to start the conversation.",

100− style = MaterialTheme.typography.bodyMedium,

101− color = MaterialTheme.colorScheme.onSurfaceVariant,

102− modifier = Modifier.align(Alignment.Center).padding(32.dp),

103− )

104 }

119 }

120+ Box(Modifier.fillMaxWidth().weight(1f)) {

121+ if (state.messages.isEmpty() && !state.loading) {

122+ Text(

123+ text = "Send a message to start the conversation.",

124+ style = MaterialTheme.typography.bodyMedium,

125+ color = MaterialTheme.colorScheme.onSurfaceVariant,

126+ modifier = Modifier.align(Alignment.Center).padding(32.dp),

127+ )

128+ }

105− LazyColumn(

129+ LazyColumn(

106− state = listState,

130+ state = listState,

107− modifier = Modifier.fillMaxSize(),

131+ modifier = Modifier.fillMaxSize(),

108− contentPadding = PaddingValues(vertical = 8.dp),

132+ contentPadding = PaddingValues(vertical = 8.dp),

109− ) {

133+ ) {

110− items(state.messages, key = { it.id }) { message ->

134+ items(state.messages, key = { it.id }) { message ->

111− MessageBubble(message)

135+ MessageBubble(message)

136+ }

137+ }

138+ if (showScrollButton) {

139+ FloatingActionButton(

140+ onClick = {

141+ coroutineScope.launch {

142+ if (state.messages.isNotEmpty()) {

143+ listState.animateScrollToItem(state.messages.size - 1)

144+ }

145+ }

146+ },

147+ modifier = Modifier

148+ .align(Alignment.BottomEnd)

149+ .padding(16.dp)

150+ .size(44.dp),

151+ ) {

152+ Icon(

153+ Icons.Filled.KeyboardArrowDown,

154+ contentDescription = "Scroll to latest message",

155+ )

156+ }

112 }

157 }

113 }

158 }

114 }

159 }

115 }

160 }

116}

161}

117

162

163+@Composable

164+private fun ReconnectingBanner() {

165+ Surface(

166+ modifier = Modifier.fillMaxWidth(),

167+ color = MaterialTheme.colorScheme.tertiaryContainer,

168+ ) {

169+ Row(

170+ modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 6.dp),

171+ verticalAlignment = Alignment.CenterVertically,

172+ horizontalArrangement = Arrangement.spacedBy(8.dp),

173+ ) {

174+ CircularProgressIndicator(

175+ modifier = Modifier.size(14.dp),

176+ strokeWidth = 2.dp,

177+ color = MaterialTheme.colorScheme.onTertiaryContainer,

178+ )

179+ Text(

180+ text = "Reconnecting…",

181+ style = MaterialTheme.typography.bodySmall,

182+ color = MaterialTheme.colorScheme.onTertiaryContainer,

183+ )

184+ }

185+ }

186+}

187+

118@Composable

188@Composable

119private fun ChatInputBar(

189private fun ChatInputBar(

120 draft: String,

190 draft: String,

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

@@ -139,7 +139,7 @@ private fun SessionRow(session: SessionView, onOpen: () -> Unit, onDelete: () ->

139 overflow = TextOverflow.Ellipsis,

140 )

141 Text(

142− text = session.id,

142+ text = shortSessionId(session.id),

143 style = MaterialTheme.typography.bodySmall,

144 color = MaterialTheme.colorScheme.onSurfaceVariant,

145 maxLines = 1,

@@ -156,6 +156,10 @@ private fun SessionRow(session: SessionView, onOpen: () -> Unit, onDelete: () ->

156 }

157}

158

159+/** Shorten a session ID for display: "abc12345…" instead of the full UUID. */

160+private fun shortSessionId(id: String): String =

161+ if (id.length > 12) id.take(8) + "…" else id

162+

159@Composable

163@Composable

160private fun EmptySessions() {

164private fun EmptySessions() {

161 Column(

165 Column(

app/src/main/java/soy/iko/opencode/ui/theme/Theme.kt−2

@@ -33,8 +33,6 @@ private val LightColors = lightColorScheme(

33 outline = LightOutline,

34)

36−private val Color0x0F1115 = androidx.compose.ui.graphics.Color(0xFF0F1115)

37−

38@Composable

36@Composable

39fun OpencodeTheme(

37fun OpencodeTheme(

40 darkTheme: Boolean = isSystemInDarkTheme(),

38 darkTheme: Boolean = isSystemInDarkTheme(),