askimo-ai · haiphucnguyen · Aug 3, 2026 · Aug 3, 2026
diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/bookmarks/BookmarksView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/bookmarks/BookmarksView.kt
@@ -27,7 +27,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Bookmark
 import androidx.compose.material.icons.filled.BookmarkBorder
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -115,7 +114,7 @@ fun bookmarksView(
                             modifier = Modifier.fillMaxWidth().height(200.dp),
                             contentAlignment = Alignment.Center,
                         ) {
-                            CircularProgressIndicator()
+                            AppComponents.loadingSpinner()
                         }
                     }
 

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/chat/ChatInputField.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/chat/ChatInputField.kt
@@ -46,7 +46,6 @@ import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Badge
 import androidx.compose.material3.Card
 import androidx.compose.material3.Checkbox
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
@@ -1241,10 +1240,7 @@ private fun toolsIndicatorButton(
                             horizontalArrangement = Arrangement.Center,
                             verticalAlignment = Alignment.CenterVertically,
                         ) {
-                            CircularProgressIndicator(
-                                modifier = Modifier.size(24.dp),
-                                color = MaterialTheme.colorScheme.onSurfaceVariant,
-                            )
+                            AppComponents.loadingSpinner(size = 24.dp)
                             Spacer(modifier = Modifier.width(8.dp))
                             Text(stringResource("chat.tools.popup.loading"))
                         }
@@ -1616,7 +1612,7 @@ private fun fileAttachmentItem(
                                 horizontalArrangement = Arrangement.spacedBy(Spacing.small),
                                 verticalAlignment = Alignment.CenterVertically,
                             ) {
-                                CircularProgressIndicator(modifier = Modifier.size(14.dp), strokeWidth = 2.dp)
+                                AppComponents.loadingSpinner(size = 14.dp)
                                 Text(
                                     text = stringResource("chat.attachment.preview.loading"),
                                     style = AppTextStyles.hint,

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/chat/ChatView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/chat/ChatView.kt
@@ -39,7 +39,6 @@ import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
@@ -599,11 +598,7 @@ fun chatView(
                                                     modifier = Modifier.size(18.dp),
                                                 )
                                                 if (ragIndexingStatus == "inprogress") {
-                                                    CircularProgressIndicator(
-                                                        modifier = Modifier.size(14.dp),
-                                                        color = statusColor,
-                                                        strokeWidth = 2.dp,
-                                                    )
+                                                    AppComponents.loadingSpinner(size = 14.dp, color = statusColor)
                                                 }
                                             }
                                         }

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/chat/MessageComponents.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/chat/MessageComponents.kt
@@ -1227,7 +1227,7 @@ private fun thinkingSection(
                     Box(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .heightIn(max = 300.dp)
+                            .heightIn(max = 200.dp)
                             .verticalScroll(scrollState)
                             .padding(start = Spacing.small, end = Spacing.medium, top = 2.dp, bottom = 2.dp),
                     ) {

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/common/components/ActionInputField.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/common/components/ActionInputField.kt
@@ -20,7 +20,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowUpward
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
@@ -110,10 +109,8 @@ internal fun actionInputField(
                 .pointerHoverIcon(PointerIcon.Hand),
         ) {
             if (isLoading) {
-                CircularProgressIndicator(
-                    modifier = Modifier.size(20.dp),
-                    strokeWidth = 2.dp,
-                    color = MaterialTheme.colorScheme.onPrimary,
+                AppComponents.loadingSpinner(
+                    size = 20.dp,
                     trackColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.3f),
                 )
             } else {
@@ -136,10 +133,8 @@ internal fun actionInputField(
                 .pointerHoverIcon(PointerIcon.Hand),
         ) {
             if (isLoading) {
-                CircularProgressIndicator(
-                    modifier = Modifier.size(14.dp),
-                    strokeWidth = 2.dp,
-                    color = MaterialTheme.colorScheme.onPrimary,
+                AppComponents.loadingSpinner(
+                    size = 14.dp,
                     trackColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.3f),
                 )
             } else {

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/common/theme/AppComponents.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/common/theme/AppComponents.kt
@@ -48,13 +48,15 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardColors
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonColors
 import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MenuDefaults
 import androidx.compose.material3.MenuItemColors
@@ -849,6 +851,42 @@ object AppComponents {
         }
     }
 
+    /**
+     * Standardised small loading spinner for all UI contexts.
+     *
+     * Color defaults to [LocalContentColor] so it automatically matches its container:
+     *   - inside a `primaryButton`         → onPrimary
+     *   - inside a `bannerCardColors` card → onSecondaryContainer
+     *   - on a plain surface               → onSurface
+     *
+     * Bakes in `strokeWidth = 2.dp` (lighter than M3 default of 4.dp) for inline use.
+     *
+     * @param size  Spinner diameter. 16.dp when inline in a button, 18.dp standalone (default).
+     * @param color Override only when a dynamic/semantic color is needed (e.g. a status color).
+     */
+    @Composable
+    fun loadingSpinner(
+        modifier: Modifier = Modifier,
+        size: Dp = 18.dp,
+        color: Color = LocalContentColor.current,
+        trackColor: Color? = null,
+    ) {
+        if (trackColor != null) {
+            CircularProgressIndicator(
+                modifier = modifier.size(size),
+                strokeWidth = 2.dp,
+                color = color,
+                trackColor = trackColor,
+            )
+        } else {
+            CircularProgressIndicator(
+                modifier = modifier.size(size),
+                strokeWidth = 2.dp,
+                color = color,
+            )
+        }
+    }
+
     @Composable
     fun scrollbarStyle(): ScrollbarStyle = ScrollbarStyle(
         minimalHeight = 16.dp,

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/MarkdownText.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/MarkdownText.kt
@@ -599,8 +599,9 @@ private fun renderCodeBlock(codeBlock: FencedCodeBlock, viewportTopY: Float? = n
                 contentAlignment = Alignment.Center,
             ) {
                 Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                    CircularProgressIndicator(
+                    AppComponents.loadingSpinner(
                         color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.4f),
+                        trackColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f),
                     )
                     Spacer(modifier = Modifier.height(Spacing.small))
                     Text(

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/MermaidChartRenderer.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/MermaidChartRenderer.kt
@@ -35,7 +35,6 @@ import androidx.compose.material.icons.filled.Download
 import androidx.compose.material.icons.filled.Fullscreen
 import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material.icons.filled.Remove
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -387,9 +386,7 @@ fun mermaidChart(
             isMermaidCliAvailable == null -> {
                 Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                     Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                        CircularProgressIndicator(
-                            color = MaterialTheme.colorScheme.onSurface,
-                        )
+                        AppComponents.loadingSpinner()
                         Spacer(modifier = Modifier.height(Spacing.large))
                         Text("Checking Mermaid CLI...", style = AppTextStyles.body)
                     }
@@ -417,9 +414,7 @@ fun mermaidChart(
             isLoading && isMermaidCliAvailable == true -> {
                 Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                     Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                        CircularProgressIndicator(
-                            color = MaterialTheme.colorScheme.onSurface,
-                        )
+                        AppComponents.loadingSpinner()
                         Spacer(modifier = Modifier.height(Spacing.large))
                         Text(stringResource("mermaid.rendering.progress"), style = AppTextStyles.body)
                     }
@@ -707,11 +702,7 @@ private fun mermaidSetupInstructions(
                 // Install progress spinner
                 if (isInstalling) {
                     Row(verticalAlignment = Alignment.CenterVertically) {
-                        CircularProgressIndicator(
-                            modifier = Modifier.size(16.dp),
-                            strokeWidth = 2.dp,
-                            color = MaterialTheme.colorScheme.onSurface,
-                        )
+                        AppComponents.loadingSpinner(size = 16.dp)
                         Spacer(modifier = Modifier.width(Spacing.small))
                         Text(
                             text = stringResource("mermaid.setup.installing"),

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/mcp/McpToolsDialog.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/mcp/McpToolsDialog.kt
@@ -21,7 +21,6 @@ import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -292,10 +291,7 @@ fun mcpToolsDialog(
                     horizontalArrangement = Arrangement.spacedBy(Spacing.medium),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    CircularProgressIndicator(
-                        modifier = Modifier.size(24.dp),
-                        color = MaterialTheme.colorScheme.onSurface,
-                    )
+                    AppComponents.loadingSpinner(size = 24.dp)
                     Text(
                         text = stringResource("mcp.tools.dialog.loading"),
                         style = AppTextStyles.bodySecondary,

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/plan/PlanDetailView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/plan/PlanDetailView.kt
@@ -38,7 +38,6 @@ import androidx.compose.material.icons.filled.FileDownload
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material.icons.filled.PushPin
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -383,11 +382,7 @@ fun planDetailView(
                                 enabled = !viewModel.isRunning,
                             ) {
                                 if (viewModel.isRunning) {
-                                    CircularProgressIndicator(
-                                        modifier = Modifier.size(16.dp),
-                                        color = MaterialTheme.colorScheme.onPrimary,
-                                        strokeWidth = 2.dp,
-                                    )
+                                    AppComponents.loadingSpinner(size = 16.dp)
                                 } else {
                                     Icon(
                                         Icons.Default.PlayArrow,
@@ -668,11 +663,7 @@ private fun agenticStepRow(
         ) {
             Box(modifier = Modifier.padding(top = 2.dp)) {
                 when (event) {
-                    is PlanStepEvent.Started -> CircularProgressIndicator(
-                        modifier = Modifier.size(14.dp),
-                        strokeWidth = 2.dp,
-                        color = MaterialTheme.colorScheme.secondary,
-                    )
+                    is PlanStepEvent.Started -> AppComponents.loadingSpinner(size = 14.dp, color = MaterialTheme.colorScheme.secondary)
 
                     is PlanStepEvent.WaitingForInput -> Icon(
                         Icons.AutoMirrored.Filled.HelpOutline,

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/plan/PlansGalleryView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/plan/PlansGalleryView.kt
@@ -36,7 +36,6 @@ import androidx.compose.material.icons.filled.Info
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material.icons.filled.Refresh
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -186,7 +185,7 @@ fun plansGalleryView(
                     Box(
                         modifier = Modifier.fillMaxWidth().height(200.dp),
                         contentAlignment = Alignment.Center,
-                    ) { CircularProgressIndicator() }
+                    ) { AppComponents.loadingSpinner() }
                     return@Column
                 }
 

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/session/SessionsView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/session/SessionsView.kt
@@ -39,7 +39,6 @@ import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.icons.filled.StarBorder
 import androidx.compose.material.icons.outlined.StarOutline
 import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -192,7 +191,7 @@ fun sessionsView(
                 when {
                     viewModel.isLoading -> {
                         Box(modifier = Modifier.fillMaxWidth().height(200.dp), contentAlignment = Alignment.Center) {
-                            CircularProgressIndicator()
+                            AppComponents.loadingSpinner()
                         }
                     }
 

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/settings/AppearanceSettingsSection.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/settings/AppearanceSettingsSection.kt
@@ -197,8 +197,20 @@ fun appearanceSettingsSection() {
                     modifier = Modifier.padding(bottom = Spacing.small),
                 )
 
-                // Language & Font (formerly General settings)
+                // Language section
+                Spacer(modifier = Modifier.height(Spacing.small))
+                Text(
+                    text = stringResource("settings.language"),
+                    style = AppTextStyles.sectionTitle,
+                )
                 languageSelectionCard()
+
+                // Font section
+                Spacer(modifier = Modifier.height(Spacing.small))
+                Text(
+                    text = stringResource("settings.font"),
+                    style = AppTextStyles.sectionTitle,
+                )
                 fontSettingsCard()
 
                 // Theme Mode Section
@@ -1258,7 +1270,7 @@ private fun languageSelectionCard() {
             ) {
                 Text(
                     text = stringResource("settings.app.language"),
-                    style = AppTextStyles.fieldLabel,
+                    style = AppTextStyles.body,
                     modifier = Modifier.weight(1f).padding(end = Spacing.large),
                 )
                 Box(modifier = Modifier.widthIn(min = dropdownRegularMinWidth, max = dropdownRegularMaxWidth)) {
@@ -1359,7 +1371,7 @@ private fun preferredAIResponseLanguageField(availableLanguages: Map<Locale, Str
             ) {
                 Text(
                     text = stringResource("settings.ai.response.language"),
-                    style = AppTextStyles.fieldLabel,
+                    style = AppTextStyles.body,
                 )
                 themedTooltip(text = stringResource("settings.ai.response.language.tooltip")) {
                     Icon(
@@ -1477,7 +1489,7 @@ private fun fontSettingsCard() {
             ) {
                 Text(
                     text = stringResource("settings.font.size"),
-                    style = AppTextStyles.fieldLabel,
+                    style = AppTextStyles.body,
                     modifier = Modifier.weight(1f).padding(end = Spacing.large),
                 )
                 Box(modifier = Modifier.widthIn(min = dropdownCompactMinWidth, max = dropdownCompactMaxWidth)) {
@@ -1523,7 +1535,7 @@ private fun fontSettingsCard() {
             ) {
                 Text(
                     text = stringResource("settings.font.line.spacing"),
-                    style = AppTextStyles.fieldLabel,
+                    style = AppTextStyles.body,
                     modifier = Modifier.weight(1f).padding(end = Spacing.large),
                 )
                 Box(modifier = Modifier.widthIn(min = dropdownCompactMinWidth, max = dropdownCompactMaxWidth)) {
@@ -1581,7 +1593,7 @@ private fun fontFamilySelector(
     ) {
         Text(
             text = label,
-            style = AppTextStyles.fieldLabel,
+            style = AppTextStyles.body,
             modifier = Modifier.weight(1f).padding(end = Spacing.large),
         )
         Box(modifier = Modifier.widthIn(min = dropdownRegularMinWidth, max = dropdownRegularMaxWidth)) {

diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/shell/GlobalSearchDialog.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/shell/GlobalSearchDialog.kt
@@ -23,7 +23,6 @@ import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.SmartToy
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
@@ -306,8 +305,7 @@ fun globalSearchDialog(
                         contentAlignment = Alignment.Center,
                     ) {
                         Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                            CircularProgressIndicator(
-                                color = MaterialTheme.colorScheme.onSurface,
+                            AppComponents.loadingSpinner(
                                 trackColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f),
                             )
                             Spacer(modifier = Modifier.height(Spacing.large))