fix(frontend): implement category caching and loading logic

Author: Lasim

services/frontend/src/components/mcp-server/CategoryDisplay.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { DynamicIcon } from '@/components/ui/dynamic-icon'
 import { McpCatalogService } from '@/services/mcpCatalogService'
+import { useEventBus } from '@/composables/useEventBus'
 import type { McpCategory } from '@/services/mcpCategoriesService'
 
 const { t } = useI18n()
+const eventBus = useEventBus()
+
+// Storage key for categories cache
+const CATEGORIES_STORAGE_KEY = 'mcp_categories_cache'
 
 interface Props {
   categoryId?: string | null
@@ -29,25 +34,56 @@ const category = ref<McpCategory | null>(props.category)
 const isLoading = ref(false)
 const error = ref<string | null>(null)
 
-// Fetch category by ID if not provided as prop
-async function fetchCategory(categoryId: string): Promise<McpCategory | null> {
+// Find category from cached categories in storage
+function findCategoryFromCache(categoryId: string): McpCategory | null {
+  const cached = eventBus.getState<McpCategory[]>(CATEGORIES_STORAGE_KEY)
+  if (cached && Array.isArray(cached)) {
+    return cached.find(cat => cat.id === categoryId) || null
+  }
+  return null
+}
+
+// Fetch categories and cache them in storage
+async function fetchAndCacheCategories(): Promise<McpCategory[]> {
+  const categories = await McpCatalogService.getCategories()
+  eventBus.setState(CATEGORIES_STORAGE_KEY, categories)
+  return categories
+}
+
+// Load category - check storage cache first, then fetch if needed
+async function loadCategory(categoryId: string): Promise<void> {
+  // First, try to find in storage cache (prevents redundant API calls)
+  const cachedCategory = findCategoryFromCache(categoryId)
+  if (cachedCategory) {
+    category.value = cachedCategory
+    return
+  }
+
+  // Not in cache, fetch from API
   try {
     isLoading.value = true
-    const categories = await McpCatalogService.getCategories()
-    return categories.find(cat => cat.id === categoryId) || null
+    error.value = null
+    const categories = await fetchAndCacheCategories()
+    category.value = categories.find(cat => cat.id === categoryId) || null
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to fetch category'
     console.error('Failed to fetch category:', err)
-    return null
   } finally {
     isLoading.value = false
   }
 }
 
+// Watch for categoryId changes (handles re-renders without remount)
+watch(() => props.categoryId, (newId) => {
+  if (newId && !props.category) {
+    loadCategory(newId)
+  }
+}, { immediate: false })
+
 // Load category on mount if categoryId is provided but category is not
-onMounted(async () => {
+onMounted(() => {
   if (props.categoryId && !props.category) {
-    category.value = await fetchCategory(props.categoryId)
+    loadCategory(props.categoryId)
   }
 })
 

services/frontend/src/services/mcpCatalogService.ts

@@ -7,7 +7,7 @@ import type {
   UpdateMcpServerRequest,
   McpServerFilters
 } from '@/views/admin/mcp-server-catalog/types'
-import type { McpCategory } from '@/services/mcpCategoriesService'
+import { McpCategoriesService, type McpCategory } from '@/services/mcpCategoriesService'
 import type { McpServerSearchParams, McpServerSearchResponse } from '@/types/mcp-catalog'
 
 export interface PaginationParams {
@@ -284,6 +284,7 @@ export class McpCatalogService {
   static async updateGlobalServer(serverId: string, serverData: UpdateMcpServerRequest): Promise<McpServer> {
     const response = await fetch(`${this.baseUrl}/api/mcp/servers/global/${serverId}`, {
       method: 'PUT',
+      mode: 'cors',
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
@@ -568,15 +569,10 @@ export class McpCatalogService {
 // This delegates to the dedicated McpCategoriesService
 export class McpCategoriesCache {
   static async getCategories(forceRefresh = false): Promise<McpCategory[]> {
-    // Import here to avoid circular dependencies
-    const { McpCategoriesService } = await import('@/services/mcpCategoriesService')
     return McpCategoriesService.getCategories(forceRefresh)
   }
 
   static clearCache(): void {
-    // Import here to avoid circular dependencies
-    import('@/services/mcpCategoriesService').then(({ McpCategoriesService }) => {
-      McpCategoriesService.clearCache()
-    })
+    McpCategoriesService.clearCache()
   }
 }

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

@@ -242,10 +242,12 @@ const handleSubmit = async (formData: McpServerFormData) => {
       git_branch: repositorySetupData?.git_branch !== undefined ? repositorySetupData.git_branch : formData.repository.git_branch
     }
 
-    // Get README markdown from storage and convert to base64
+    // Get README markdown from storage and convert to base64 (UTF-8 safe)
     const readmeData = eventBus.getState<{ readme_markdown: string }>('edit_readme_data')
     const readmeMarkdown = readmeData?.readme_markdown || ''
-    const readmeBase64 = readmeMarkdown ? btoa(readmeMarkdown) : ''
+    const readmeBase64 = readmeMarkdown
+      ? btoa(new TextEncoder().encode(readmeMarkdown).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+      : ''
 
     // CRITICAL FIX: Synchronize environment variables from installation_methods to team_env_schema
     let finalConfigurationSchema = { ...formData.configuration_schema }