Function handleSave

frontend/src/pages/McpLibraryPage.tsx:773–874

()

  };

  const handleSave = async () => {
    setIsSaving(true);
    try {
      // Build headers from headerEntries - include entries with value OR secretId
      const headersPayload = headerEntries
        .filter((e) => e.key.trim() && (e.value.trim() || e.secretId))
        .reduce(
          (acc, entry) => {
            const key = entry.key.trim();
            // Use secret reference format if secretId is set, otherwise use the value
            const value = entry.secretId ? `{{secret:${entry.secretId}}}` : entry.value.trim();
            acc[key] = value;
            return acc;
          },
          {} as Record<string, string>,
        );

      const payload: CreateMcpServer = {
        name: formData.name.trim(),
        description: formData.description.trim() || undefined,
        transportType: formData.transportType,
        endpoint: formData.transportType === 'http' ? formData.endpoint.trim() : undefined,
        command: formData.transportType === 'stdio' ? formData.command.trim() : undefined,
        args:
          formData.transportType === 'stdio' && formData.args.trim()
            ? formData.args
                .split('\n')
                .map((a) => a.trim())
                .filter(Boolean)
            : undefined,
        headers: Object.keys(headersPayload).length > 0 ? headersPayload : undefined,
        enabled: true, // Always enabled on create, can toggle from list
      };

      if (editingServer) {
        // Mark as checking BEFORE the update to prevent "Unknown" flash
        setCheckingServers((prev) => new Set([...prev, editingServer]));
        await updateServer(editingServer, payload);
        // Run health check after update to refresh status and tools
        testConnection(editingServer)
          .then(async () => {
            // Fetch all tools after health check to update tool counts
            await fetchAllTools();
            // Refresh health status in store before clearing checking state
            await fetchServers();
          })
          .catch(() => {
            // Silently ignore health check errors on update
          })
          .finally(() => {
            setCheckingServers((prev) => {
              const next = new Set(prev);
              next.delete(editingServer);
              return next;
            });
          });
        toast({ title: 'Server updated', description: `${payload.name} has been updated.` });
      } else {