fix(frontend): handle validation error in StdioServerInput component

Author: Lasim

services/frontend/src/components/account/AccountSidebarNav.vue

@@ -11,7 +11,7 @@ interface Props {
   canChangePassword?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   canChangePassword: true
 })
 

services/frontend/src/components/admin/mcp-catalog/McpServerEditFormWizard.vue

@@ -394,7 +394,6 @@ watch(
 )
 
 // Computed properties
-const currentStepData = computed(() => steps[currentStep.value] || null)
 const isFirstStep = computed(() => currentStep.value === 0)
 const isLastStep = computed(() => currentStep.value === steps.length - 1)
 const canGoNext = computed(() => !isLastStep.value)

services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/StdioServerInput.vue

@@ -97,7 +97,7 @@ watch(jsonInput, (newValue) => {
       raw_json: newValue
     })
   } else {
-    validationError.value = validation.error
+    validationError.value = validation.error ?? null
     isValid.value = false
     extractedServerName.value = ''
     extractedCommand.value = ''

services/frontend/src/components/admin/mcp-catalog/steps/ConfigurationSchemaStepAdd.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Terminal, Users, User, Globe, Plus } from 'lucide-vue-next'
+import { Terminal, Users, User, Plus } from 'lucide-vue-next'
 import { DsCard } from '@/components/ui/ds-card'
 import { Button } from '@/components/ui/button'
 import ConfigurationSchemaEnvironmentSection from './ConfigurationSchemaEnvironmentSection.vue'

services/frontend/src/components/admin/mcp-catalog/steps/ConfigurationSchemaStepEdit.vue

@@ -29,7 +29,7 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
 
-import { Terminal, Users, User, Globe, Plus } from 'lucide-vue-next'
+import { Terminal, Users, User, Plus } from 'lucide-vue-next'
 import { DsCard } from '@/components/ui/ds-card'
 import ConfigurationSchemaEnvironmentSection from './ConfigurationSchemaEnvironmentSection.vue'
 import ConfigurationSchemaHeadersSection from './ConfigurationSchemaHeadersSection.vue'

services/frontend/src/views/dashboard/index.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import { Button } from '@/components/ui/button'
-import { Plus } from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
@@ -415,7 +414,7 @@ onUnmounted(() => {
   <NavbarLayout>
     <div class="space-y-6">
       <!-- Header -->
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-8">
         <div class="flex-1">
           <TeamUsageIndicator v-if="selectedTeam" :team-id="selectedTeam.id" />
         </div>
@@ -425,7 +424,7 @@ onUnmounted(() => {
             @click="handleOpenConfigModal"
             variant="outline"
             :class="[
-              'flex items-center justify-center gap-2 bg-black text-white border-black hover:bg-black/90 hover:border-black hover:text-white',
+              'flex items-center justify-center gap-2',
               showStep2ButtonHighZIndex ? 'relative z-[10000]' : ''
             ]"
           >
@@ -435,8 +434,7 @@ onUnmounted(() => {
             @click="handleInstallServer"
             class="flex items-center justify-center gap-2"
           >
-            <Plus class="h-4 w-4" />
-            {{ t('mcpInstallations.actions.install') }}
+            {{ t('mcpInstallations.featuredList.browseCatalog') }}
           </Button>
         </div>
       </div>

services/frontend/src/views/mcp-server/index.vue

@@ -5,7 +5,6 @@ import { useRouter } from 'vue-router'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import { DsPageHeading } from '@/components/ui/ds-page-heading'
 import { Button } from '@/components/ui/button'
-import { Plus } from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import McpInstallationsCard from '@/components/mcp-server/McpInstallationsCard.vue'
@@ -255,8 +254,7 @@ onUnmounted(() => {
           @click="handleInstallServer"
           class="flex items-center gap-2"
         >
-          <Plus class="h-4 w-4" />
-          {{ t('mcpInstallations.actions.install') }}
+          {{ t('mcpInstallations.featuredList.browseCatalog') }}
         </Button>
       </template>
     </DsPageHeading>