refactor(ui): split monolithic screen files into focused components (#485)

* refactor(ui): extract SkillsStep to components package

Move the 252-LOC SkillsStep composable out of ProfilesScreen.kt into
ui/profiles/components/SkillsStep.kt. Body is verbatim (behavior-preserving);
only package + imports changed. Parent now imports and calls it directly.

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).
Note: sibling screens resolve Modifier.weight() without an explicit import;
matching that convention (no spurious weight import) to avoid the
internal RowColumnParentData.weight shadowing error.

* refactor(ui): extract ProfileBuilderView cluster to components package

Move the Profile Builder wizard (ProfileBuilderView + validateProfileName +
IdentityStep/ModelStep/McpStep/AddMcpDialog/ReviewStep) out of ProfilesScreen.kt
into ui/profiles/components/ProfileBuilderView.kt. Body is verbatim
(behavior-preserving); only package + imports changed.

Notable wiring required:
- validateProfileName kept as internal fun: it is also used by the parent's
  clone dialog, so both the screen and the builder share it via import.
- ProfilesUiState/ProfilesViewModel imported from the ui.profiles package.
- SkillsStep call resolves to the already-extracted sibling file (same package).

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).

* refactor(ui): extract MoaConfigDialog cluster to components package

Move the Mixture-of-Agents config dialog (MoaConfigDialog + MoaConfigEditor +
MoaSlotPicker + MoaPickerTarget sealed class) out of ModelScreen.kt into
ui/model/components/MoaConfigDialog.kt. Body is verbatim (behavior-preserving);
only package + imports + entry visibility changed.

- Entry MoaConfigDialog is internal (called by ModelScreen root); the editor,
  slot picker, and sealed class stay private to the new file.
- The @Composable annotation preceding the declaration is moved with the
  cluster (earlier attempt left it orphaned, causing a duplicate-annotation
  compile error at the next declaration).

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).

* refactor(ui): extract PlatformCard + TelegramOnboardingDialog clusters

Move two self-contained clusters out of ChannelsScreen.kt:
- PlatformCard.kt: StateStyle (private data class) + platformStateStyle +
  StateBadge + PlatformCard. Entry PlatformCard is internal (called by
  ChannelsScreen root); StateStyle/StateBadge/platformStateStyle stay private.
- TelegramOnboardingDialog.kt: TelegramOnboardingDialog. Entry internal.

Wiring required:
- ConfigureForm kept in ChannelsScreen as internal (shared by PlatformCard
  and the screen root) and imported into PlatformCard.kt.
- ChannelsUiState/OnboardingPhase imported from the ui.channels package.
- formatTimestamp left in the screen (used by ConfigureForm).

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).

* refactor(ui): extract SkillsScreen sub-composables to components package

Split the 914-line SkillsScreen.kt into the screen root plus 4 cohesive
component files under ui/skills/components/:
- SourceBadge.kt: shared SourceBadge (internal, used by both tabs)
- InstalledSkillsTab.kt: InstalledSkillsView + SkillCard + SkillPreviewDialog
- HubSkillsTab.kt: HubBrowseView + HubSkillCard
- SkillEditorDialog.kt: SkillEditorDialog

Wiring required:
- CATEGORY_ALL promoted private -> internal in SkillsScreen (shared by the
  screen root and InstalledSkillsView) and imported where needed.
- SkillFilter / SkillsUiState imported from the ui.skills package.
- HubBrowseView now reads isHubSearching/hubResults/hubSearchError off its
  SkillsUiState param (fields, not locals) - no behavior change.

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).

* refactor(ui): extract SettingsScreen + SystemScreen sub-composables

SettingsScreen.kt (1238 -> ~340): move self-contained sections into
ui/settings/components/ - ConnectionSection (+TestResultCard/SaveIndicator/
TestConnectionButton), BehaviorSection, AppearanceSection (+ChatSection/
NavBarSection), AboutSection, ProfileEditorDialog (+DeleteProfileConfirmDialog).
Shared leaves SectionCard/InfoRow kept in the screen as internal and imported
by the extracted files.

SystemScreen.kt (1755 -> 1619): move CredentialEntryRow + HookCard into
ui/system/components/ (both internal). formatBytes/formatDuration helpers stay
in the screen (used by the root and remaining content).

Verified: ktlintCheck PASS, compileDebugKotlin PASS (local SDK).

* fix(#485): use LocalHermesStatusColors for PlatformCard state colors

Map platform connection-status badges to semantic LocalHermesStatusColors
slots (success/warning/error) + add neutral slot for not_configured/disabled.
Removes hardcoded hex (Color(0xFF...)) and MaterialTheme.colorScheme usage
flagged by Sourcery; neutral defaults to StatusGrey so existing theme
providers are untouched.

app/src/main/java/com/m57/hermescontrol/ui/skills/SkillsScreen.kt

@@ -75,7 +75,7 @@ import com.m57.hermescontrol.ui.common.ToastEffect
 import com.m57.hermescontrol.ui.common.listContentPadding
 import com.m57.hermescontrol.ui.common.listItemSpacing
 
-private const val CATEGORY_ALL = "All"
+internal const val CATEGORY_ALL = "All"
 
 @Composable
 fun SkillsScreen(

app/src/main/java/com/m57/hermescontrol/ui/skills/components/HubSkillsTab.kt

@@ -0,0 +1,245 @@
+package com.m57.hermescontrol.ui.skills.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.CloudDownload
+import androidx.compose.material.icons.filled.Extension
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.data.model.HubSkill
+import com.m57.hermescontrol.ui.common.EmptyState
+import com.m57.hermescontrol.ui.common.ErrorState
+import com.m57.hermescontrol.ui.common.LoadingState
+import com.m57.hermescontrol.ui.common.listContentPadding
+import com.m57.hermescontrol.ui.common.listItemSpacing
+import com.m57.hermescontrol.ui.skills.SkillsUiState
+
+@Composable
+internal fun HubBrowseView(
+    state: SkillsUiState,
+    hubQuery: String,
+    onHubQueryChange: (String) -> Unit,
+    onSearch: (String) -> Unit,
+    onClearSearch: () -> Unit,
+    onInstall: (String) -> Unit,
+    isInstalling: Boolean,
+    installingSkillName: String?,
+) {
+    Column(modifier = Modifier.fillMaxSize()) {
+        OutlinedTextField(
+            value = hubQuery,
+            onValueChange = onHubQueryChange,
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+            placeholder = { Text(stringResource(R.string.skills_hub_search_placeholder)) },
+            trailingIcon = {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (hubQuery.isNotEmpty()) {
+                        IconButton(onClick = {
+                            onHubQueryChange("")
+                            onClearSearch()
+                        }) {
+                            Icon(
+                                imageVector = Icons.Filled.Close,
+                                contentDescription = stringResource(R.string.action_clear),
+                            )
+                        }
+                    }
+                    IconButton(
+                        onClick = { onSearch(hubQuery) },
+                        enabled = hubQuery.isNotBlank(),
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.Search,
+                            contentDescription = stringResource(R.string.skills_hub_search_button),
+                        )
+                    }
+                }
+            },
+            singleLine = true,
+            shape = RoundedCornerShape(12.dp),
+            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
+            keyboardActions =
+                KeyboardActions(
+                    onSearch = {
+                        if (hubQuery.isNotBlank()) {
+                            onSearch(hubQuery)
+                        }
+                    },
+                ),
+        )
+
+        when {
+            state.isHubSearching -> {
+                LoadingState()
+            }
+
+            state.hubSearchError != null -> {
+                ErrorState(
+                    message = state.hubSearchError,
+                    onRetry = { onSearch(hubQuery) },
+                )
+            }
+
+            state.hubResults.isEmpty() && hubQuery.isNotBlank() && !state.isHubSearching -> {
+                EmptyState(
+                    icon = Icons.Filled.Extension,
+                    title = stringResource(R.string.skills_hub_empty_results),
+                )
+            }
+
+            state.hubResults.isNotEmpty() -> {
+                LazyColumn(
+                    modifier = Modifier.weight(1f).padding(listContentPadding),
+                    verticalArrangement = listItemSpacing,
+                ) {
+                    itemsIndexed(
+                        state.hubResults,
+                        key = { index, hubSkill -> "${hubSkill.name}:${hubSkill.source ?: "unknown"}:$index" },
+                    ) { _, hubSkill ->
+                        HubSkillCard(
+                            hubSkill = hubSkill,
+                            onInstall = { onInstall(hubSkill.name) },
+                            isInstalling = isInstalling && installingSkillName == hubSkill.name,
+                        )
+                    }
+                }
+            }
+
+            else -> {
+                EmptyState(
+                    icon = Icons.Filled.Search,
+                    title = stringResource(R.string.skills_hub_search_hint),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun HubSkillCard(
+    hubSkill: HubSkill,
+    onInstall: () -> Unit,
+    isInstalling: Boolean,
+) {
+    Card(
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+        colors =
+            CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surface,
+            ),
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth().padding(16.dp),
+        ) {
+            // ── Top row: name + source badge ──
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    text = hubSkill.name,
+                    style =
+                        MaterialTheme.typography.titleMedium.copy(
+                            fontWeight = FontWeight.SemiBold,
+                        ),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f),
+                )
+                hubSkill.source?.let { source ->
+                    Spacer(modifier = Modifier.width(6.dp))
+                    SourceBadge(source = source)
+                }
+            }
+
+            // ── Category ──
+            hubSkill.category?.let { cat ->
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(
+                    text = cat,
+                    style = MaterialTheme.typography.labelSmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+
+            // ── Description ──
+            hubSkill.description?.let { desc ->
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = desc,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    maxLines = 3,
+                    overflow = TextOverflow.Ellipsis,
+                )
+            }
+
+            // ── Install button ──
+            Spacer(modifier = Modifier.height(8.dp))
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.End,
+            ) {
+                Button(
+                    onClick = onInstall,
+                    enabled = !isInstalling,
+                ) {
+                    if (isInstalling) {
+                        CircularProgressIndicator(
+                            modifier = Modifier.size(18.dp),
+                            strokeWidth = 2.dp,
+                            color = MaterialTheme.colorScheme.onPrimary,
+                        )
+                    } else {
+                        Icon(
+                            imageVector = Icons.Filled.CloudDownload,
+                            contentDescription = null,
+                            modifier = Modifier.size(18.dp),
+                        )
+                        Spacer(Modifier.width(4.dp))
+                        Text(stringResource(R.string.skills_hub_install))
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/skills/components/InstalledSkillsTab.kt

@@ -0,0 +1,407 @@
+package com.m57.hermescontrol.ui.skills.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CloudOff
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Extension
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.data.model.Skill
+import com.m57.hermescontrol.theme.LocalHermesStatusColors
+import com.m57.hermescontrol.ui.common.EmptyState
+import com.m57.hermescontrol.ui.common.ErrorState
+import com.m57.hermescontrol.ui.common.FilterChipRow
+import com.m57.hermescontrol.ui.common.HermesScaffold
+import com.m57.hermescontrol.ui.common.LoadingState
+import com.m57.hermescontrol.ui.common.NavIcon
+import com.m57.hermescontrol.ui.common.SearchBar
+import com.m57.hermescontrol.ui.common.listContentPadding
+import com.m57.hermescontrol.ui.common.listItemSpacing
+import com.m57.hermescontrol.ui.skills.CATEGORY_ALL
+import com.m57.hermescontrol.ui.skills.SkillFilter
+import com.m57.hermescontrol.ui.skills.SkillsUiState
+
+@Composable
+internal fun InstalledSkillsView(
+    state: SkillsUiState,
+    query: String,
+    onQueryChange: (String) -> Unit,
+    selectedStatus: SkillFilter,
+    onStatusChange: (SkillFilter) -> Unit,
+    selectedCategory: String?,
+    onCategoryChange: (String) -> Unit,
+    onToggle: (Skill) -> Unit,
+    onEdit: (String) -> Unit,
+    onUninstall: (String) -> Unit,
+    onSetSourceFilter: (String?) -> Unit,
+    sourceFilter: String?,
+    isUninstalling: Boolean,
+    uninstallingSkillName: String?,
+    onRefresh: () -> Unit,
+) {
+    val categories =
+        remember(state.skills) {
+            state.skills
+                .mapNotNull { it.category }
+                .distinct()
+                .sorted()
+        }
+    val sources =
+        remember(state.skills) {
+            state.skills
+                .mapNotNull { it.source }
+                .distinct()
+                .sorted()
+        }
+
+    val filteredSkills =
+        remember(state.skills, query, selectedStatus, selectedCategory, sourceFilter) {
+            state.skills.filter { skill ->
+                (
+                    query.isBlank() || skill.name.contains(query, ignoreCase = true) ||
+                        skill.description?.contains(query, ignoreCase = true) == true
+                ) &&
+                    (
+                        selectedStatus == SkillFilter.ALL_STATUSES ||
+                            (selectedStatus == SkillFilter.ENABLED && skill.enabled) ||
+                            (selectedStatus == SkillFilter.DISABLED && !skill.enabled)
+                    ) &&
+                    (selectedCategory == CATEGORY_ALL || skill.category == selectedCategory) &&
+                    (sourceFilter == null || skill.source == sourceFilter)
+            }
+        }
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        SearchBar(
+            query = query,
+            onQueryChange = onQueryChange,
+            placeholder = stringResource(R.string.skills_search_placeholder),
+        )
+
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 4.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            FilterChipRow(
+                chips =
+                    listOf(
+                        SkillFilter.ALL_STATUSES,
+                        SkillFilter.ENABLED,
+                        SkillFilter.DISABLED,
+                    ),
+                selectedChip = selectedStatus,
+                onChipSelected = onStatusChange,
+                chipLabel = { chip -> Text(stringResource(chip.labelRes)) },
+            )
+        }
+
+        if (categories.isNotEmpty() || sources.isNotEmpty()) {
+            FilterChipRow(
+                chips = listOf(stringResource(R.string.skills_category_all)) + categories,
+                selectedChip = selectedCategory,
+                onChipSelected = onCategoryChange,
+            )
+            if (sources.isNotEmpty()) {
+                Row(
+                    modifier =
+                        Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp, vertical = 2.dp),
+                    horizontalArrangement = Arrangement.spacedBy(6.dp),
+                ) {
+                    FilterChip(
+                        selected = sourceFilter == null,
+                        onClick = { onSetSourceFilter(null) },
+                        label = {
+                            Text(
+                                stringResource(R.string.skills_source_all),
+                                style = MaterialTheme.typography.labelSmall,
+                            )
+                        },
+                    )
+                    sources.forEach { source ->
+                        FilterChip(
+                            selected = sourceFilter == source,
+                            onClick = { onSetSourceFilter(if (sourceFilter == source) null else source) },
+                            label = { Text(source, style = MaterialTheme.typography.labelSmall) },
+                        )
+                    }
+                }
+            }
+        }
+
+        when {
+            state.isLoading -> {
+                LoadingState()
+            }
+
+            state.errorMessage != null -> {
+                ErrorState(
+                    message = state.errorMessage,
+                    onRetry = onRefresh,
+                )
+            }
+
+            filteredSkills.isEmpty() -> {
+                EmptyState(
+                    icon = Icons.Filled.Extension,
+                    title = stringResource(R.string.skills_empty_message),
+                )
+            }
+
+            else -> {
+                LazyColumn(
+                    modifier = Modifier.padding(listContentPadding),
+                    verticalArrangement = listItemSpacing,
+                ) {
+                    itemsIndexed(
+                        filteredSkills,
+                        key = { index, skill -> "${skill.name}:${skill.source ?: "unknown"}:$index" },
+                    ) { _, skill ->
+                        SkillCard(
+                            skill = skill,
+                            onToggle = { onToggle(skill) },
+                            onAction = { onEdit(skill.name) },
+                            onUninstall =
+                                if (skill.source == "hub") {
+                                    { onUninstall(skill.name) }
+                                } else {
+                                    null
+                                },
+                            isUninstalling = isUninstalling && uninstallingSkillName == skill.name,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SkillCard(
+    skill: Skill,
+    onToggle: () -> Unit,
+    onAction: () -> Unit,
+    onUninstall: (() -> Unit)?,
+    isUninstalling: Boolean,
+) {
+    Card(
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+        colors =
+            CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surface,
+            ),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(
+                modifier = Modifier.weight(1f).padding(16.dp),
+            ) {
+                // ── Top row: name + source badge + toggle ──
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = skill.name,
+                        style =
+                            MaterialTheme.typography.titleMedium.copy(
+                                fontWeight = FontWeight.SemiBold,
+                            ),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f),
+                    )
+                    skill.source?.let { source ->
+                        Spacer(modifier = Modifier.width(6.dp))
+                        SourceBadge(source = source)
+                    }
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Switch(
+                        checked = skill.enabled,
+                        onCheckedChange = { onToggle() },
+                    )
+                }
+
+                // ── Category ──
+                skill.category?.let { cat ->
+                    Spacer(modifier = Modifier.height(2.dp))
+                    Text(
+                        text = cat,
+                        style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                }
+
+                // ── Description ──
+                skill.description?.let { desc ->
+                    Spacer(modifier = Modifier.height(4.dp))
+                    Text(
+                        text = desc,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+
+                // ── Action buttons row ──
+                if (onUninstall != null) {
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.End,
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        IconButton(onClick = onAction) {
+                            Icon(
+                                imageVector = Icons.Filled.Edit,
+                                contentDescription = stringResource(R.string.content_desc_edit_skill),
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                        IconButton(
+                            onClick = onUninstall,
+                            enabled = !isUninstalling,
+                        ) {
+                            if (isUninstalling) {
+                                CircularProgressIndicator(
+                                    modifier = Modifier.size(18.dp),
+                                    strokeWidth = 2.dp,
+                                )
+                            } else {
+                                val statusColors = LocalHermesStatusColors.current
+                                Icon(
+                                    imageVector = Icons.Filled.CloudOff,
+                                    contentDescription = stringResource(R.string.content_desc_uninstall_skill),
+                                    tint = statusColors.error,
+                                )
+                            }
+                        }
+                    }
+                } else {
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.End,
+                    ) {
+                        IconButton(onClick = onAction) {
+                            Icon(
+                                imageVector = Icons.Filled.Edit,
+                                contentDescription = stringResource(R.string.content_desc_edit_skill),
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun SkillPreviewDialog(
+    skillName: String,
+    isLoading: Boolean,
+    content: String?,
+    onDismiss: () -> Unit,
+) {
+    Dialog(
+        onDismissRequest = onDismiss,
+        properties = DialogProperties(usePlatformDefaultWidth = false),
+    ) {
+        Card(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .padding(16.dp),
+            colors =
+                CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surface,
+                ),
+        ) {
+            HermesScaffold(
+                title = { Text(stringResource(R.string.skills_preview_title, skillName)) },
+                navigationIcon = NavIcon.Back(onBack = onDismiss),
+            ) { padding ->
+                Box(
+                    modifier =
+                        Modifier
+                            .fillMaxSize(),
+                ) {
+                    when {
+                        isLoading -> {
+                            LoadingState()
+                        }
+
+                        content != null -> {
+                            Column(
+                                modifier =
+                                    Modifier
+                                        .fillMaxSize()
+                                        .padding(16.dp)
+                                        .verticalScroll(rememberScrollState()),
+                            ) {
+                                Text(
+                                    text = content,
+                                    style =
+                                        MaterialTheme.typography.bodyMedium.copy(
+                                            fontFamily = FontFamily.Monospace,
+                                        ),
+                                )
+                            }
+                        }
+
+                        else -> {
+                            EmptyState(
+                                icon = Icons.Filled.Extension,
+                                title = stringResource(R.string.skills_preview_empty),
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/skills/components/SkillEditorDialog.kt

@@ -0,0 +1,173 @@
+package com.m57.hermescontrol.ui.skills.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Save
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import com.m57.hermescontrol.R
+import com.m57.hermescontrol.ui.common.HermesScaffold
+import com.m57.hermescontrol.ui.common.LoadingState
+import com.m57.hermescontrol.ui.common.NavIcon
+
+@Composable
+internal fun SkillEditorDialog(
+    skillName: String,
+    isLoading: Boolean,
+    initialContent: String?,
+    isSaving: Boolean,
+    saveSuccess: Boolean,
+    onSave: (String) -> Unit,
+    onDismiss: () -> Unit,
+    onClearSaveSuccess: () -> Unit,
+) {
+    var contentText by remember(initialContent) { mutableStateOf(initialContent.orEmpty()) }
+    var showDiscardConfirm by remember { mutableStateOf(false) }
+
+    val hasChanges =
+        remember(initialContent, contentText) {
+            val original = initialContent.orEmpty()
+            original != contentText
+        }
+
+    LaunchedEffect(saveSuccess) {
+        if (saveSuccess) {
+            onClearSaveSuccess()
+            onDismiss()
+        }
+    }
+
+    Dialog(
+        onDismissRequest = {
+            if (hasChanges) {
+                showDiscardConfirm = true
+            } else {
+                onDismiss()
+            }
+        },
+        properties = DialogProperties(usePlatformDefaultWidth = false),
+    ) {
+        Card(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .padding(16.dp),
+            colors =
+                CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surface,
+                ),
+        ) {
+            HermesScaffold(
+                title = { Text(stringResource(R.string.skills_edit_title, skillName)) },
+                navigationIcon =
+                    NavIcon.Back(
+                        onBack = {
+                            if (hasChanges) {
+                                showDiscardConfirm = true
+                            } else {
+                                onDismiss()
+                            }
+                        },
+                    ),
+                actions = {
+                    if (!isLoading) {
+                        IconButton(
+                            onClick = { onSave(contentText) },
+                            enabled = !isSaving,
+                        ) {
+                            if (isSaving) {
+                                CircularProgressIndicator(
+                                    modifier = Modifier.fillMaxSize(0.6f),
+                                    strokeWidth = 2.dp,
+                                    color = MaterialTheme.colorScheme.onSurface,
+                                )
+                            } else {
+                                Icon(
+                                    imageVector = Icons.Filled.Save,
+                                    contentDescription = stringResource(R.string.content_desc_save_changes),
+                                )
+                            }
+                        }
+                    }
+                },
+            ) { padding ->
+                Box(
+                    modifier =
+                        Modifier
+                            .fillMaxSize(),
+                ) {
+                    when {
+                        isLoading -> {
+                            LoadingState()
+                        }
+
+                        else -> {
+                            OutlinedTextField(
+                                value = contentText,
+                                onValueChange = { contentText = it },
+                                modifier =
+                                    Modifier
+                                        .fillMaxSize()
+                                        .padding(16.dp),
+                                textStyle =
+                                    TextStyle(
+                                        fontFamily = FontFamily.Monospace,
+                                        color = MaterialTheme.colorScheme.onSurface,
+                                    ),
+                                placeholder = {
+                                    Text(stringResource(R.string.skills_content_placeholder))
+                                },
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    if (showDiscardConfirm) {
+        AlertDialog(
+            onDismissRequest = { showDiscardConfirm = false },
+            title = { Text(stringResource(R.string.skills_discard_title)) },
+            text = { Text(stringResource(R.string.skills_discard_message)) },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        showDiscardConfirm = false
+                        onDismiss()
+                    },
+                ) {
+                    Text(stringResource(R.string.action_discard))
+                }
+            },
+            dismissButton = {
+                TextButton(onClick = { showDiscardConfirm = false }) {
+                    Text(stringResource(R.string.action_cancel))
+                }
+            },
+        )
+    }
+}

app/src/main/java/com/m57/hermescontrol/ui/skills/components/SourceBadge.kt

@@ -0,0 +1,33 @@
+package com.m57.hermescontrol.ui.skills.components
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun SourceBadge(source: String) {
+    val (color, label) =
+        when (source) {
+            "hub" -> MaterialTheme.colorScheme.tertiary to "hub"
+            "built-in" -> MaterialTheme.colorScheme.secondary to "built-in"
+            "optional" -> MaterialTheme.colorScheme.outline to "opt"
+            else -> MaterialTheme.colorScheme.outline to source
+        }
+    Surface(
+        color = color.copy(alpha = 0.15f),
+        shape = MaterialTheme.shapes.small,
+    ) {
+        Text(
+            text = label,
+            style = MaterialTheme.typography.labelSmall,
+            color = color,
+            modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp),
+        )
+    }
+}