feat(frontend): ensure fresh data loading in edit mode

Author: Lasim

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

@@ -167,20 +167,18 @@ const submitError = ref<string | null>(null)
 const isFetchingGitHub = ref(false)
 const githubFetchError = ref<string | null>(null)
 
-// Initialize storage with form data for edit mode - BUT PRESERVE USER EDITS
+// Initialize storage with form data for edit mode - FORCE FRESH DATA LOADING
 const initializeStorageWithData = (data: McpServerFormData) => {
-  // Initialize all storage keys that the storage-first components expect
+  // Always overwrite storage with fresh data in edit mode
+  // This ensures we load fresh data from database, not old corrupted cache
   eventBus.setState('edit_basic_data', data.basic)
   eventBus.setState('edit_repository_data', data.repository)
   eventBus.setState('edit_technical_data', data.technical)
 
-  // CRITICAL: Only initialize configuration_schema if user hasn't made edits yet
-  const existingConfigSchema = eventBus.getState('edit_configuration_schema')
-  if (data.configuration_schema && !existingConfigSchema) {
-    // Only set if no existing edits
+  // FORCE FRESH CONFIGURATION SCHEMA - always overwrite in edit mode
+  if (data.configuration_schema) {
     eventBus.setState('edit_configuration_schema', data.configuration_schema)
   }
-  // If existingConfigSchema exists, DON'T overwrite it - keep user's edits!
 
   // Initialize Claude Desktop config if available
   if (data.technical.installation_methods && data.technical.installation_methods.length > 0) {

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

@@ -61,7 +61,7 @@ const isUpdatingFromStorage = ref(false)
 // Load data from storage
 const loadFromStorage = () => {
   const storedData = eventBus.getState<TechnicalFormData>(STORAGE_KEY)
-  
+
   if (storedData) {
     localData.value = { ...localData.value, ...storedData }
   } else if (props.formData?.technical) {
@@ -312,7 +312,7 @@ watch(jsonInput, (newValue) => {
     eventBus.emit('technical-env-vars-updated', {
       envVars: validation.envVars || []
     })
-    
+
     // ALSO store in persistent storage for ConfigurationSchemaStep to load later
     eventBus.setState('technical_extracted_env_vars_edit', validation.envVars || [])
 
@@ -329,7 +329,7 @@ watch(jsonInput, (newValue) => {
       env: serverConfig.env || {}
     }]
 
-    // Update the technical form data
+    // Update installation_methods
     updateField('installation_methods', installationMethods)
 
     // Also update the capabilities section with environment variables
@@ -396,6 +396,7 @@ const handleStepChanged = (data: { from: number; to: number; stepKey: string })
       loadLatestConfigFromStorage()
     }, 50)
   }
+
 }
 
 // Computed properties

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

@@ -178,9 +178,63 @@ const typeOptions = [
   { value: 'boolean', label: computed(() => t('mcpCatalog.form.configurationSchema.dataTypes.boolean')) },
 ]
 
-// Smart default logic
-const isStaticTemplateArg = (arg: string): boolean => {
-  return arg.startsWith('-') || arg.includes('@modelcontextprotocol')
+// Placeholder detection for team-configurable values (still needed for env vars)
+const isPlaceholderValue = (value: string): boolean => {
+  const placeholderPatterns = [
+    /^YOUR_[A-Z_]+$/,           // YOUR_API_KEY, YOUR_TOKEN
+    /^[A-Z_]+_KEY$/,            // API_KEY, ACCESS_KEY
+    /^[A-Z_]+_TOKEN$/,          // AUTH_TOKEN, ACCESS_TOKEN
+    /^[A-Z_]+_SECRET$/,         // CLIENT_SECRET, API_SECRET
+    /^<[^>]+>$/,                // <API_KEY>, <YOUR_TOKEN>
+    /^\{[^}]+\}$/,              // {API_KEY}, {YOUR_TOKEN}
+    /^\$\{[^}]+\}$/,            // ${API_KEY}, ${YOUR_TOKEN}
+    /^REPLACE_WITH_/,           // REPLACE_WITH_YOUR_KEY
+    /^CHANGE_ME/,               // CHANGE_ME, CHANGE_ME_API_KEY
+  ]
+  return placeholderPatterns.some(pattern => pattern.test(value))
+}
+
+// Simple args parsing - first 2 are template, rest are team configurable
+const parseArgsIntelligently = (rawArgs: string[]): ConfigItem[] => {
+  const items: ConfigItem[] = []
+
+  rawArgs.forEach((arg, index) => {
+    // Skip if arg is undefined
+    if (!arg) return
+
+    // First 2 arguments are always template (static)
+    if (index < 2) {
+      items.push({
+        id: `template_arg_${index}`,
+        type: 'arg',
+        category: 'template',
+        name: arg,
+        value: arg,
+        description: `Static argument: ${arg}`,
+        dataType: 'string',
+        required: true,
+        locked: true,
+        default_team_locked: false,
+      })
+    }
+    // All other arguments are team configurable
+    else {
+      items.push({
+        id: `team_arg_${index}`,
+        type: 'arg',
+        category: 'team',
+        name: arg,
+        value: undefined,
+        description: `Team-configurable argument: ${arg}`,
+        dataType: 'string',
+        required: true,
+        locked: false,
+        default_team_locked: true,
+      })
+    }
+  })
+
+  return items
 }
 
 // Parse and categorize items from Claude Desktop config
@@ -193,38 +247,29 @@ const parseFromClaudeConfig = () => {
 
   const items: ConfigItem[] = []
 
-  // Process args
+  // Process args with intelligent parsing
   const rawArgs = serverConfig.args || []
-  rawArgs.forEach((arg, index) => {
-    items.push({
-      id: `arg_${index}`,
-      type: 'arg',
-      category: isStaticTemplateArg(arg) ? 'template' : 'user',
-      name: `arg_${index}`,
-      value: arg,
-      description: '',
-      dataType: 'string',
-      required: true,
-      locked: false,
-      default_team_locked: false,
-    })
-  })
+  const argItems = parseArgsIntelligently(rawArgs)
+  items.push(...argItems)
 
   // Process envs
   const rawEnvs = serverConfig.env || {}
   Object.entries(rawEnvs).forEach(([key, value]) => {
+    const isPlaceholder = isPlaceholderValue(value)
     items.push({
       id: `env_${key}`,
       type: 'env',
-      category: 'team',
+      category: isPlaceholder ? 'team' : 'user',
       name: key,
       value: value,
-      description: '',
+      description: isPlaceholder
+        ? `Team-configurable environment variable (placeholder: ${value})`
+        : `User-configurable environment variable`,
       dataType: 'string',
       required: true,
       locked: false,
-      default_team_locked: true,
-      visible_to_users: false,
+      default_team_locked: isPlaceholder,
+      visible_to_users: !isPlaceholder,
     })
   })
 

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

@@ -164,45 +164,46 @@ const typeOptions = [
   { value: 'boolean', label: computed(() => t('mcpCatalog.form.configurationSchema.dataTypes.boolean')) },
 ]
 
+
 // Load data from existing schema in storage
 const loadFromStorageSchema = () => {
   const storedSchema = eventBus.getState<ConfigurationSchema>(STORAGE_KEY)
   if (!storedSchema) return
 
   const items: ConfigItem[] = []
 
-  // Convert template args
+  // Convert template args - these should display the actual argument values
   ;(storedSchema.template_args || []).forEach((arg, index) => {
     items.push({
       id: `template_arg_${index}`,
       type: 'arg',
       category: 'template',
       name: arg.value, // Use the actual value as the name
       value: arg.value, // Keep value for reference
-      description: arg.description || '',
+      description: arg.description || `Static argument: ${arg.value}`,
       dataType: 'string',
       required: true,
       locked: arg.locked,
       default_team_locked: false,
     })
   })
 
-  // Convert team args schema
+  // Convert team args schema - these should display the actual argument values
   ;(storedSchema.team_args_schema || []).forEach((arg, index) => {
     items.push({
       id: `team_arg_${index}`,
       type: 'arg',
       category: 'team',
-      name: arg.name,
-      description: arg.description || '',
+      name: arg.name, // This should be the actual argument value like "@upstash/context7-mcp"
+      description: arg.description || `Team-configurable argument: ${arg.name}`,
       dataType: arg.type || 'string',
       required: arg.required || false,
       locked: arg.locked || false,
       default_team_locked: arg.default_team_locked || false,
     })
   })
 
-  // Convert user args schema
+  // Convert user args schema (these are manually added, not from original parsing)
   ;(storedSchema.user_args_schema || []).forEach((arg, index) => {
     items.push({
       id: `user_arg_${index}`,
@@ -568,7 +569,6 @@ onUnmounted(() => {
 
 <template>
   <div class="space-y-6">
-
     <!-- Arguments Section -->
     <div class="space-y-4">
       <div>

services/frontend/src/views/admin/mcp-server-catalog/edit/[id].vue

@@ -41,13 +41,38 @@ const goToCatalog = () => {
   router.push('/admin/mcp-server-catalog')
 }
 
+// Clear all edit-related storage to ensure fresh data loading
+const clearEditStorage = () => {
+  // Clear all edit-related storage keys
+  const editStorageKeys = [
+    'edit_basic_data',
+    'edit_repository_data',
+    'edit_technical_data',
+    'edit_configuration_schema',
+    'edit_claude_config',
+    'technical_extracted_env_vars_edit',
+    'mcp_edit_drafts'
+  ]
+
+  editStorageKeys.forEach(key => {
+    eventBus.clearState(key)
+  })
+
+  // Also clear localStorage directly to ensure complete cleanup
+  editStorageKeys.forEach(key => {
+    localStorage.removeItem(key)
+  })
+}
+
 // Load server data
 const loadServerData = async () => {
   try {
     isLoading.value = true
     isRetrying.value = true
     loadError.value = null
 
+    clearEditStorage()
+
     const server = await McpCatalogService.getServerById(serverId)
     serverData.value = server
 
@@ -64,7 +89,7 @@ const loadServerData = async () => {
 }
 
 // Helper function to parse JSON fields with proper error handling
- 
+
 const parseJsonField = (fieldValue: any, defaultValue: any) => {
   if (!fieldValue || fieldValue === '' || (typeof fieldValue === 'string' && fieldValue.trim() === '')) {
     return defaultValue
@@ -83,7 +108,7 @@ const parseJsonField = (fieldValue: any, defaultValue: any) => {
 // Convert server data to form data format
 const convertServerToFormData = (server: McpServer): Partial<McpServerFormData> => {
   // Convert installation methods to new format
-   
+
   const convertedInstallationMethods = (server.installation_methods || []).map((method: any) => {
     // Handle old format: {type, command, description}
     if (method.type && method.command && !method.client) {
@@ -107,7 +132,7 @@ const convertServerToFormData = (server: McpServer): Partial<McpServerFormData>
       args: method.args || [],
       env: method.env || {}
     }
-   
+
   }).filter((method: any) =>
     // Filter out git clone template entries and any invalid entries
     method.command &&