From 045bd8f84cd58a07828f41a059c49a57bd7409d6 Mon Sep 17 00:00:00 2001
From: ChrAlpha <53332481+ChrAlpha@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:34:20 +0000
Subject: [PATCH] refactor(web): compact skill metadata on narrow layouts

---
 .../src/pages/bots/components/bot-skills.vue  | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/bots/components/bot-skills.vue b/apps/web/src/pages/bots/components/bot-skills.vue
index 8e566d4a..2c8ca9c1 100644
--- a/apps/web/src/pages/bots/components/bot-skills.vue
+++ b/apps/web/src/pages/bots/components/bot-skills.vue
@@ -158,27 +158,22 @@
             {{ skill.description || '-' }}
           </CardDescription>
         </CardHeader>
-        <CardContent class="pt-0 mt-auto space-y-2">
+        <CardContent class="pt-0 mt-auto space-y-1.5">
           <div class="flex flex-wrap items-center gap-1.5">
             <Badge
               variant="secondary"
-              class="text-[10px]"
+              size="sm"
+              class="rounded-full"
             >
               {{ skill.managed ? $t('bots.skills.managedBadge') : $t('bots.skills.discoveredBadge') }}
             </Badge>
             <Badge
               variant="outline"
-              class="text-[10px]"
+              size="sm"
+              class="rounded-full"
             >
               {{ stateLabel(skill.state) }}
             </Badge>
-            <Badge
-              v-if="skill.source_kind && skill.source_kind !== 'managed'"
-              variant="outline"
-              class="text-[10px]"
-            >
-              {{ sourceKindLabel(skill.source_kind) }}
-            </Badge>
           </div>
           <p
             v-if="skill.shadowed_by"
@@ -190,9 +185,9 @@
           <p
             v-if="skill.source_path"
             class="text-[11px] text-muted-foreground truncate"
-            :title="skill.source_path"
+            :title="sourceSummary(skill)"
           >
-            {{ skill.source_path }}
+            {{ sourceSummary(skill) }}
           </p>
         </CardContent>
       </Card>
@@ -346,6 +341,15 @@ function sourceKindLabel(kind?: string) {
   }
 }
 
+function sourceSummary(skill: SkillItem) {
+  const sourcePath = skill.source_path || ''
+  if (!sourcePath) return ''
+  if (!skill.source_kind || skill.source_kind === 'managed') {
+    return sourcePath
+  }
+  return `${sourceKindLabel(skill.source_kind)} · ${sourcePath}`
+}
+
 function stateLabel(state?: string) {
   switch (state) {
     case 'disabled':