From 821ab254e1fe2762a79ad9c90ed8e4f74a1d3116 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Mon, 19 Jan 2026 08:07:55 +0200
Subject: [PATCH] fix: use correct API for canonical path imports in web UI

When importing servers from a canonical config path (e.g., Claude Desktop,
Claude Code), the handleImport function incorrectly used the JSON content
API instead of the path API, causing "Content is required" errors.

The fix tracks when a canonical path import is active and uses the
appropriate importServersFromPath API endpoint for the actual import.

Changes:
- Add activeCanonicalImport state to track canonical path imports
- Set activeCanonicalImport when preview from canonical path succeeds
- Update handleImport to check activeCanonicalImport first and use path API
- Clear activeCanonicalImport on file/paste preview and modal close

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/AddServerModal.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AddServerModal.vue b/frontend/src/components/AddServerModal.vue
index 099f127a..a9fc2112 100644
--- a/frontend/src/components/AddServerModal.vue
+++ b/frontend/src/components/AddServerModal.vue
@@ -612,6 +612,8 @@ const validationError = ref<{ message: string; line?: number; column?: number; h
 // Canonical config paths for quick import
 const canonicalPaths = ref<CanonicalConfigPath[]>([])
 const importingCanonicalPath = ref<string | null>(null)
+// Track the active canonical path when importing (to use correct API in handleImport)
+const activeCanonicalImport = ref<{ path: string; format: string } | null>(null)
 
 // Editor refs for line numbers
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
@@ -870,6 +872,8 @@ async function triggerPreview() {
   previewResult.value = null
   selectedServers.value.clear()
   validationError.value = null
+  // Clear canonical import when doing file/paste preview
+  activeCanonicalImport.value = null
 
   if (importMode.value === 'file' && importFile.value) {
     await previewFromFile()
@@ -964,7 +968,15 @@ async function handleImport() {
     const serverNames = Array.from(selectedServers.value)
 
     let response
-    if (importMode.value === 'file' && importFile.value) {
+    if (activeCanonicalImport.value) {
+      // Import from canonical path (e.g., Claude Desktop config)
+      response = await api.importServersFromPath({
+        path: activeCanonicalImport.value.path,
+        format: activeCanonicalImport.value.format,
+        server_names: serverNames,
+        preview: false
+      })
+    } else if (importMode.value === 'file' && importFile.value) {
       response = await api.importServersFromFile(importFile.value, {
         format: importFormat.value || undefined,
         server_names: serverNames,
@@ -1036,6 +1048,9 @@ async function importFromCanonicalPath(config: CanonicalConfigPath) {
     // Show preview result
     previewResult.value = previewResponse.data
 
+    // Store the canonical path info for use in handleImport
+    activeCanonicalImport.value = { path: config.path, format: config.format }
+
     // Select all servers by default
     selectedServers.value.clear()
     previewResponse.data.imported.forEach(s => selectedServers.value.add(s.name))
@@ -1078,6 +1093,7 @@ function handleClose() {
   importError.value = ''
   validationError.value = null
   selectedServers.value.clear()
+  activeCanonicalImport.value = null
 
   // Reset tab
   activeTab.value = 'manual'