feat(frontend): load supported clients and update client selection modal

Author: Lasim

services/frontend/src/components/gateway-config/ClientConfigurationModal.vue

@@ -34,17 +34,44 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 // State
-const selectedClient = ref('claude-desktop')
+const selectedClient = ref('')
 const configContent = ref('')
 const isLoading = ref(false)
 const isCopying = ref(false)
+const supportedClients = ref<string[]>([])
+const isLoadingClients = ref(false)
+
+// Load supported clients when modal opens
+watch(() => props.open, async (isOpen) => {
+  if (isOpen && supportedClients.value.length === 0) {
+    await loadSupportedClients()
+  }
+})
 
 // Load configuration when client changes
 watch(selectedClient, async (newClient) => {
   if (newClient) {
     await loadConfiguration(newClient)
   }
-}, { immediate: true })
+})
+
+// Load supported clients from API
+async function loadSupportedClients() {
+  isLoadingClients.value = true
+  try {
+    const clients = await GatewayConfigService.getSupportedClients()
+    supportedClients.value = clients
+    // Set first client as default if no client is selected
+    if (!selectedClient.value && clients.length > 0) {
+      selectedClient.value = clients[0]
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to load supported clients'
+    toast.error(errorMessage)
+  } finally {
+    isLoadingClients.value = false
+  }
+}
 
 // Load configuration from API
 async function loadConfiguration(client: string) {
@@ -61,6 +88,28 @@ async function loadConfiguration(client: string) {
   }
 }
 
+// Get display name for client (with fallback)
+function getClientDisplayName(client: string): string {
+  // Convert client name to camelCase for i18n key matching
+  const clientKey = client.split('-').map((word, index) => {
+    if (index === 0) {
+      return word.toLowerCase()
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+  }).join('')
+
+  const translationKey = `gatewayConfig.clients.${clientKey}`
+  const translated = t(translationKey)
+
+  // If translation returns the key itself, it means translation doesn't exist
+  // Fall back to a capitalized version of the client name
+  if (translated === translationKey) {
+    return client.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+  }
+
+  return translated
+}
+
 function handleClose() {
   emit('update:open', false)
 }
@@ -73,15 +122,15 @@ async function handleCopyAndClose() {
   }
 
   isCopying.value = true
-  
+
   try {
     await navigator.clipboard.writeText(configContent.value)
     handleClose()
     // Show success toast after modal closes
     setTimeout(() => {
       toast.success(t('gatewayConfig.messages.copySuccess'))
     }, 100)
-  } catch (error) {
+  } catch {
     toast.error('Failed to copy configuration to clipboard')
   } finally {
     isCopying.value = false
@@ -102,19 +151,53 @@ async function handleCopyAndClose() {
       </AlertDialogHeader>
 
       <div class="space-y-6">
+        <!-- Installation Step -->
+        <div class="space-y-3">
+          <label class="text-sm font-medium">First, install the DeployStack Gateway</label>
+          <div class="rounded-lg bg-gray-900 shadow-lg border border-gray-700 overflow-hidden">
+            <!-- Terminal Header -->
+            <div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-600">
+              <div class="flex items-center space-x-2">
+                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+              </div>
+              <div class="text-gray-400 text-sm font-mono">
+                ~/setup
+              </div>
+              <div class="w-16"></div>
+            </div>
+
+            <!-- Terminal Body -->
+            <div class="p-4 bg-gray-900">
+              <div class="font-mono text-sm">
+                <div class="text-gray-300 mb-1">
+                  <span class="text-white">$ </span><span class="text-yellow-300">npm install -g @deploystack/gateway</span>
+                </div>
+                <div class="text-gray-300 mb-3">
+                  <span class="text-white">$ </span><span class="text-yellow-300">deploystack login</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <!-- Client Selection Dropdown -->
         <div class="space-y-2">
           <label class="text-sm font-medium">{{ t('gatewayConfig.modal.clientLabel') }}</label>
-          <Select v-model="selectedClient">
+          <Select v-model="selectedClient" :disabled="isLoadingClients">
             <SelectTrigger class="w-full">
-              <SelectValue :placeholder="t('gatewayConfig.modal.selectPlaceholder')" />
+              <SelectValue
+                :placeholder="isLoadingClients ? 'Loading clients...' : t('gatewayConfig.modal.selectPlaceholder')"
+              />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="claude-desktop">
-                {{ t('gatewayConfig.clients.claudeDesktop') }}
-              </SelectItem>
-              <SelectItem value="cursor">
-                {{ t('gatewayConfig.clients.cursor') }}
+              <SelectItem
+                v-for="client in supportedClients"
+                :key="client"
+                :value="client"
+              >
+                {{ getClientDisplayName(client) }}
               </SelectItem>
             </SelectContent>
           </Select>
@@ -127,7 +210,7 @@ async function handleCopyAndClose() {
             v-model="configContent"
             :placeholder="isLoading ? t('gatewayConfig.modal.loading') : t('gatewayConfig.modal.configPlaceholder')"
             :disabled="isLoading"
-            rows="12"
+            rows="8"
             class="font-mono text-sm"
             readonly
           />
@@ -138,11 +221,11 @@ async function handleCopyAndClose() {
         <Button @click="handleClose" variant="outline">
           {{ t('actions.close') }}
         </Button>
-        <Button 
-          @click="handleCopyAndClose" 
+        <Button
+          @click="handleCopyAndClose"
           :loading="isCopying"
           loading-text="Copying..."
-          :disabled="!configContent.trim() || isLoading"
+          :disabled="!configContent.trim() || isLoading || isLoadingClients"
         >
           {{ t('gatewayConfig.button.copyAndClose') }}
         </Button>

services/frontend/src/i18n/locales/en/gatewayConfig.ts

@@ -11,7 +11,10 @@ export default {
 
   clients: {
     claudeDesktop: 'Claude Desktop',
-    cursor: 'Cursor'
+    cline: 'Cline',
+    vscode: 'VS Code',
+    cursor: 'Cursor',
+    windsurf: 'Windsurf'
   },
 
   button: {

services/frontend/src/services/gatewayConfigService.ts

@@ -1,8 +1,13 @@
 import { getEnv } from '@/utils/env'
 
+interface ClientsListResponse {
+  clients: string[]
+}
+
 export class GatewayConfigService {
   private static baseUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static async getClientConfig(client: string): Promise<any> {
     const response = await fetch(`${this.baseUrl}/api/gateway/config/${client}`, {
       method: 'GET',
@@ -18,4 +23,21 @@ export class GatewayConfigService {
 
     return response.json()
   }
+
+  static async getSupportedClients(): Promise<string[]> {
+    const response = await fetch(`${this.baseUrl}/api/gateway/config/clients`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch supported clients list')
+    }
+
+    const data: ClientsListResponse = await response.json()
+    return data.clients
+  }
 }