fix(dashboard): refine capability and welcome styling (#9541)

Remove the custom capability source chip and refine welcome card styling.

dashboard/src/components/extension/SkillsSection.vue

@@ -71,10 +71,6 @@
                   >
                     {{ tm("status.preset") }}
                   </v-chip>
-                  <CapabilitySourceChip
-                    :label="sourceTypeLabel(skill.source_type, skill)"
-                    :tone="sourceTypeTone(skill.source_type)"
-                  />
                 </div>
               </template>
 
@@ -794,7 +790,6 @@ import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
 import { skillApi, systemConfigApi } from "@/api/v1";
 import { useI18n, useModuleI18n } from "@/i18n/composables";
-import CapabilitySourceChip from "@/components/shared/CapabilitySourceChip.vue";
 import OutlinedActionListItem from "@/components/shared/OutlinedActionListItem.vue";
 import { useCustomizerStore } from "@/stores/customizer";
 
@@ -807,7 +802,6 @@ const STATUS_SKIPPED = "skipped";
 export default {
   name: "SkillsSection",
   components: {
-    CapabilitySourceChip,
     OutlinedActionListItem,
     VueMonacoEditor,
   },
@@ -985,28 +979,6 @@ export default {
       return payload.skills || [];
     };
 
-    const sourceTypeLabel = (sourceType, skill = null) => {
-      if (sourceType === "plugin") {
-        return tm("skills.sourcePlugin", {
-          plugin:
-            skill?.plugin_display_name ||
-            skill?.source_label ||
-            skill?.plugin_name ||
-            "",
-        });
-      }
-      if (sourceType === "sandbox_only") return tm("skills.sourceSandboxOnly");
-      if (sourceType === "both") return tm("skills.sourceBoth");
-      return tm("skills.sourceLocalOnly");
-    };
-
-    const sourceTypeTone = (sourceType) => {
-      if (sourceType === "sandbox_only") return "preset";
-      if (sourceType === "plugin") return "plugin";
-      if (sourceType === "both") return "mixed";
-      return "local";
-    };
-
     const isSandboxPresetSkill = (skill) =>
       skill?.source_type === "sandbox_only";
     const isPluginProvidedSkill = (skill) => skill?.source_type === "plugin";
@@ -1863,8 +1835,6 @@ export default {
       viewPayload,
       deleteCandidate,
       deleteRelease,
-      sourceTypeLabel,
-      sourceTypeTone,
       isSandboxPresetSkill,
       isPluginProvidedSkill,
       isReadOnlySourceSkill,

dashboard/src/components/shared/CapabilitySourceChip.vue

@@ -1,79 +0,0 @@
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  tone: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <v-chip
-    size="x-small"
-    variant="flat"
-    :class="['capability-source-chip', `capability-source-chip--${tone}`]"
-    :title="label"
-  >
-    {{ label }}
-  </v-chip>
-</template>
-
-<style scoped>
-.capability-source-chip {
-  margin: 0;
-}
-
-.capability-source-chip--plugin {
-  border: 1px solid rgba(21, 101, 192, 0.35) !important;
-  background-color: rgba(33, 150, 243, 0.22) !important;
-  color: #0d47a1 !important;
-}
-
-.capability-source-chip--mcp {
-  border: 1px solid rgba(230, 81, 0, 0.35) !important;
-  background-color: rgba(255, 112, 67, 0.22) !important;
-  color: #bf360c !important;
-}
-
-.capability-source-chip--local {
-  border: 1px solid rgba(46, 125, 50, 0.35) !important;
-  background-color: rgba(76, 175, 80, 0.2) !important;
-  color: #1b5e20 !important;
-}
-
-.capability-source-chip--preset {
-  border: 1px solid rgba(106, 27, 154, 0.35) !important;
-  background-color: rgba(156, 39, 176, 0.2) !important;
-  color: #6a1b9a !important;
-}
-
-.capability-source-chip--mixed {
-  border: 1px solid rgba(0, 105, 92, 0.35) !important;
-  background-color: rgba(0, 150, 136, 0.2) !important;
-  color: #00695c !important;
-}
-
-:global(.v-theme--PurpleThemeDark) .capability-source-chip--plugin {
-  color: #64b5f6 !important;
-}
-
-:global(.v-theme--PurpleThemeDark) .capability-source-chip--mcp {
-  color: #ffab91 !important;
-}
-
-:global(.v-theme--PurpleThemeDark) .capability-source-chip--local {
-  color: #a5d6a7 !important;
-}
-
-:global(.v-theme--PurpleThemeDark) .capability-source-chip--preset {
-  color: #ce93d8 !important;
-}
-
-:global(.v-theme--PurpleThemeDark) .capability-source-chip--mixed {
-  color: #80cbc4 !important;
-}
-</style>

dashboard/src/components/shared/PersonaCapabilityList.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed } from "vue";
-import CapabilitySourceChip from "./CapabilitySourceChip.vue";
 
 const props = defineProps({
   title: {
@@ -105,11 +104,6 @@ const partiallySelected = computed(
 
         <v-list-item-title class="capability-list__item-title">
           <span>{{ item.name }}</span>
-          <CapabilitySourceChip
-            v-if="item.badge"
-            :label="item.badge"
-            :tone="item.badgeTone || 'local'"
-          />
         </v-list-item-title>
         <v-list-item-subtitle v-if="item.meta || item.description">
           <span v-if="item.meta">{{ item.meta }}</span>

dashboard/src/views/WelcomePage.vue

@@ -14,7 +14,7 @@
 
       <v-row class="px-4">
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card class="welcome-card pa-6" elevation="0">
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm('onboard.title') }}
             </div>
@@ -97,7 +97,7 @@
 
       <v-row class="px-4 mt-4">
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card class="welcome-card pa-6" elevation="0">
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm('resources.title') }}
             </div>
@@ -151,7 +151,7 @@
 
       <v-row v-if="showAnnouncement" class="px-4 mb-4">
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card class="welcome-card pa-6" elevation="0">
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm('announcement.title') }}
             </div>
@@ -557,6 +557,7 @@ watch(computerAccessRuntime, async (value, oldValue) => {
 
 .welcome-card {
   border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .welcome-announcement-markdown {