From 2c02787189d6468247a0c8f8f1392d2a1bd0e818 Mon Sep 17 00:00:00 2001 From: hiennguyen142 <294386332+hiennguyen142@users.noreply.github.com> Date: Wed, 5 Aug 2026 19:44:41 -0700 Subject: [PATCH] feat(skills): Display runtime names with improved styling - Visually enhances the presentation of runtimes in both agentic and manual skill views. - Updates `SelectableText` to streamline color application logic. --- .../io/askimo/ui/common/ui/SelectableText.kt | 3 +- .../io/askimo/ui/skills/AgenticSkillsView.kt | 80 +++++++++--------- .../io/askimo/ui/skills/ManualSkillsView.kt | 83 ++++++++++--------- 3 files changed, 87 insertions(+), 79 deletions(-) diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/SelectableText.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/SelectableText.kt index be47ca57..cf292ed7 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/SelectableText.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/common/ui/SelectableText.kt @@ -5,7 +5,6 @@ package io.askimo.ui.common.ui import androidx.compose.foundation.text.selection.SelectionContainer -import androidx.compose.material3.LocalContentColor import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -34,7 +33,7 @@ fun selectableText( ) { Text( text = text, - color = if (color == Color.Unspecified) LocalContentColor.current else color, + color = color, style = style, fontWeight = fontWeight, fontFamily = fontFamily, diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/skills/AgenticSkillsView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/skills/AgenticSkillsView.kt index 4d331633..e1d311e5 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/skills/AgenticSkillsView.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/skills/AgenticSkillsView.kt @@ -183,48 +183,22 @@ private fun agenticContent( .fillMaxWidth() .padding(start = 24.dp, end = 36.dp, top = 24.dp, bottom = 24.dp), ) { + val runtimes = ExternalAgentLoader.displayNames() + val runtimesLabel = runtimes.mapIndexed { i, r -> + if (i == runtimes.lastIndex) "or $r" else r + }.joinToString(", ") + + // ── Title row: page title + toolbar actions ──────────────── Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.Top, + verticalAlignment = Alignment.CenterVertically, ) { - Column(modifier = Modifier.weight(1f)) { - Text( - text = stringResource("skills.view.title"), - style = AppTextStyles.pageTitle, - ) - val runtimes = ExternalAgentLoader.displayNames() - val runtimesLabel = runtimes.mapIndexed { i, r -> - if (i == runtimes.lastIndex) "or $r" else r - }.joinToString(", ") - Spacer(modifier = Modifier.height(4.dp)) - Text( - text = stringResource("settings.skills.description", runtimesLabel), - style = AppTextStyles.bodySecondary, - ) - Spacer(modifier = Modifier.height(8.dp)) - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text( - text = stringResource("settings.skills.runtimes"), - style = AppTextStyles.caption, - ) - runtimes.forEach { runtime -> - Surface( - shape = MaterialTheme.shapes.small, - color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f), - ) { - Text( - text = runtime, - style = AppTextStyles.hint, - modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), - ) - } - } - } - } + Text( + text = stringResource("skills.view.title"), + style = AppTextStyles.pageTitle, + modifier = Modifier.weight(1f), + ) Row(verticalAlignment = Alignment.CenterVertically) { // Mode toggle — Agentic is active; clicking Manual switches sub-view skillsModeToggle(agenticMode = true, onToggle = { if (!it) onSwitchToManual() }) @@ -272,6 +246,36 @@ private fun agenticContent( } } } + + // ── Description + runtimes: full width below the title row ─ + Spacer(modifier = Modifier.height(4.dp)) + Text( + text = stringResource("settings.skills.description", runtimesLabel), + style = AppTextStyles.bodySecondary, + modifier = Modifier.fillMaxWidth(), + ) + Spacer(modifier = Modifier.height(8.dp)) + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text( + text = stringResource("settings.skills.runtimes"), + style = AppTextStyles.caption, + ) + runtimes.forEach { runtime -> + Surface( + shape = MaterialTheme.shapes.small, + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f), + ) { + Text( + text = runtime, + style = AppTextStyles.hint, + modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), + ) + } + } + } } // ── Agentic execution area ───────────────────────────────────── diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/skills/ManualSkillsView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/skills/ManualSkillsView.kt index 2a2bc347..088334b6 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/skills/ManualSkillsView.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/skills/ManualSkillsView.kt @@ -4,6 +4,7 @@ */ package io.askimo.ui.skills +import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.core.tween import androidx.compose.animation.slideInHorizontally @@ -187,7 +188,7 @@ internal fun manualSkillsView( ), ) } - androidx.compose.animation.AnimatedVisibility( + AnimatedVisibility( visible = showOverlayPanel, enter = slideInHorizontally(initialOffsetX = { it }), exit = slideOutHorizontally(targetOffsetX = { it }), @@ -229,48 +230,22 @@ private fun manualContent( .fillMaxWidth() .padding(start = 24.dp, end = 36.dp, top = 24.dp, bottom = 24.dp), ) { + val runtimes = ExternalAgentLoader.displayNames() + val runtimesLabel = runtimes.mapIndexed { i, r -> + if (i == runtimes.lastIndex) "or $r" else r + }.joinToString(", ") + + // ── Title row: page title + toolbar actions ──────────────── Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.Top, + verticalAlignment = Alignment.CenterVertically, ) { - Column(modifier = Modifier.weight(1f)) { - Text( - text = stringResource("skills.view.title"), - style = AppTextStyles.pageTitle, - ) - val runtimes = ExternalAgentLoader.displayNames() - val runtimesLabel = runtimes.mapIndexed { i, r -> - if (i == runtimes.lastIndex) "or $r" else r - }.joinToString(", ") - Spacer(modifier = Modifier.height(4.dp)) - Text( - text = stringResource("settings.skills.description", runtimesLabel), - style = AppTextStyles.bodySecondary, - ) - Spacer(modifier = Modifier.height(8.dp)) - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text( - text = stringResource("settings.skills.runtimes"), - style = AppTextStyles.caption, - ) - runtimes.forEach { runtime -> - Surface( - shape = MaterialTheme.shapes.small, - color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f), - ) { - Text( - text = runtime, - style = AppTextStyles.hint, - modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), - ) - } - } - } - } + Text( + text = stringResource("skills.view.title"), + style = AppTextStyles.pageTitle, + modifier = Modifier.weight(1f), + ) // Toolbar actions Row(verticalAlignment = Alignment.CenterVertically) { skillsModeToggle(agenticMode = false, onToggle = { if (it) onSwitchToAgentic() }) @@ -317,6 +292,36 @@ private fun manualContent( } } + // ── Description + runtimes: full width below the title row ─ + Spacer(modifier = Modifier.height(4.dp)) + Text( + text = stringResource("settings.skills.description", runtimesLabel), + style = AppTextStyles.bodySecondary, + modifier = Modifier.fillMaxWidth(), + ) + Spacer(modifier = Modifier.height(8.dp)) + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text( + text = stringResource("settings.skills.runtimes"), + style = AppTextStyles.caption, + ) + runtimes.forEach { runtime -> + Surface( + shape = MaterialTheme.shapes.small, + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f), + ) { + Text( + text = runtime, + style = AppTextStyles.hint, + modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), + ) + } + } + } + // ── Selected skill header ────────────────────────────────── if (selectedSkill != null) { Spacer(modifier = Modifier.height(12.dp))