feat:support DXT file server installation (#200)

frontend/src/components/DxtUploadForm.tsx

@@ -0,0 +1,413 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getApiUrl } from '@/utils/runtime';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+
+interface DxtUploadFormProps {
+  onSuccess: (serverConfig: any) => void;
+  onCancel: () => void;
+}
+
+interface DxtUploadResponse {
+  success: boolean;
+  data?: {
+    manifest: any;
+    extractDir: string;
+  };
+  message?: string;
+}
+
+const DxtUploadForm: React.FC<DxtUploadFormProps> = ({ onSuccess, onCancel }) => {
+  const { t } = useTranslation();
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [showServerForm, setShowServerForm] = useState(false);
+  const [manifestData, setManifestData] = useState<any>(null);
+  const [extractDir, setExtractDir] = useState<string>('');
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [pendingServerName, setPendingServerName] = useState<string>('');
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.name.endsWith('.dxt')) {
+        setSelectedFile(file);
+        setError(null);
+      } else {
+        setError(t('dxt.invalidFileType'));
+      }
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.name.endsWith('.dxt')) {
+        setSelectedFile(file);
+        setError(null);
+      } else {
+        setError(t('dxt.invalidFileType'));
+      }
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      setError(t('dxt.noFileSelected'));
+      return;
+    }
+
+    setIsUploading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('dxtFile', selectedFile);
+
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(getApiUrl('/dxt/upload'), {
+        method: 'POST',
+        headers: {
+          'x-auth-token': token || '',
+        },
+        body: formData,
+      });
+
+      const result: DxtUploadResponse = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.message || `HTTP error! Status: ${response.status}`);
+      }
+
+      if (result.success && result.data) {
+        setManifestData(result.data.manifest);
+        setExtractDir(result.data.extractDir);
+        setShowServerForm(true);
+      } else {
+        throw new Error(result.message || t('dxt.uploadFailed'));
+      }
+    } catch (err) {
+      console.error('DXT upload error:', err);
+      setError(err instanceof Error ? err.message : t('dxt.uploadFailed'));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleInstallServer = async (serverName: string, forceOverride: boolean = false) => {
+    setIsUploading(true);
+    setError(null);
+
+    try {
+      // Convert DXT manifest to MCPHub stdio server configuration
+      const serverConfig = convertDxtToMcpConfig(manifestData, extractDir, serverName);
+
+      const token = localStorage.getItem('mcphub_token');
+
+      // First, check if server exists
+      if (!forceOverride) {
+        const checkResponse = await fetch(getApiUrl('/servers'), {
+          method: 'GET',
+          headers: {
+            'x-auth-token': token || '',
+          },
+        });
+
+        if (checkResponse.ok) {
+          const checkResult = await checkResponse.json();
+          const existingServer = checkResult.data?.find((server: any) => server.name === serverName);
+
+          if (existingServer) {
+            // Server exists, show confirmation dialog
+            setPendingServerName(serverName);
+            setShowConfirmDialog(true);
+            setIsUploading(false);
+            return;
+          }
+        }
+      }
+
+      // Install or override the server
+      const method = forceOverride ? 'PUT' : 'POST';
+      const url = forceOverride ? getApiUrl(`/servers/${encodeURIComponent(serverName)}`) : getApiUrl('/servers');
+
+      const response = await fetch(url, {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token || '',
+        },
+        body: JSON.stringify({
+          name: serverName,
+          config: serverConfig,
+        }),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.message || `HTTP error! Status: ${response.status}`);
+      }
+
+      if (result.success) {
+        onSuccess(serverConfig);
+      } else {
+        throw new Error(result.message || t('dxt.installFailed'));
+      }
+    } catch (err) {
+      console.error('DXT install error:', err);
+      setError(err instanceof Error ? err.message : t('dxt.installFailed'));
+      setIsUploading(false);
+    }
+  };
+
+  const handleConfirmOverride = () => {
+    setShowConfirmDialog(false);
+    if (pendingServerName) {
+      handleInstallServer(pendingServerName, true);
+    }
+  };
+
+  const handleCancelOverride = () => {
+    setShowConfirmDialog(false);
+    setPendingServerName('');
+    setIsUploading(false);
+  };
+
+  const convertDxtToMcpConfig = (manifest: any, extractPath: string, _serverName: string) => {
+    const mcpConfig = manifest.server?.mcp_config || {};
+
+    // Convert DXT manifest to MCPHub stdio configuration
+    const config: any = {
+      type: 'stdio',
+      command: mcpConfig.command || 'node',
+      args: (mcpConfig.args || []).map((arg: string) =>
+        arg.replace('${__dirname}', extractPath)
+      ),
+    };
+
+    // Add environment variables if they exist
+    if (mcpConfig.env && Object.keys(mcpConfig.env).length > 0) {
+      config.env = { ...mcpConfig.env };
+
+      // Replace ${__dirname} in environment variables
+      Object.keys(config.env).forEach(key => {
+        if (typeof config.env[key] === 'string') {
+          config.env[key] = config.env[key].replace('${__dirname}', extractPath);
+        }
+      });
+    }
+
+    return config;
+  };
+
+  if (showServerForm && manifestData) {
+    return (
+      <>
+        <ConfirmDialog
+          isOpen={showConfirmDialog}
+          onClose={handleCancelOverride}
+          onConfirm={handleConfirmOverride}
+          title={t('dxt.serverExistsTitle')}
+          message={t('dxt.serverExistsConfirm', { serverName: pendingServerName })}
+          confirmText={t('dxt.override')}
+          cancelText={t('common.cancel')}
+          variant="warning"
+        />
+
+        <div className={`fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 ${showConfirmDialog ? 'opacity-50 pointer-events-none' : ''}`}>
+          <div className="bg-white shadow rounded-lg p-6 w-full max-w-2xl max-h-screen overflow-y-auto">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-xl font-semibold text-gray-900">{t('dxt.installServer')}</h2>
+              <button onClick={onCancel} className="text-gray-500 hover:text-gray-700">
+                ✕
+              </button>
+            </div>
+
+            {error && (
+              <div className="mb-4 bg-red-50 border-l-4 border-red-500 p-4 rounded">
+                <p className="text-red-700">{error}</p>
+              </div>
+            )}
+
+            <div className="space-y-6">
+              {/* Extension Info */}
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <h3 className="font-medium text-gray-900 mb-2">{t('dxt.extensionInfo')}</h3>
+                <div className="space-y-2 text-sm">
+                  <div><strong>{t('dxt.name')}:</strong> {manifestData.display_name || manifestData.name}</div>
+                  <div><strong>{t('dxt.version')}:</strong> {manifestData.version}</div>
+                  <div><strong>{t('dxt.description')}:</strong> {manifestData.description}</div>
+                  {manifestData.author && (
+                    <div><strong>{t('dxt.author')}:</strong> {manifestData.author.name}</div>
+                  )}
+                  {manifestData.tools && manifestData.tools.length > 0 && (
+                    <div>
+                      <strong>{t('dxt.tools')}:</strong>
+                      <ul className="list-disc list-inside ml-4">
+                        {manifestData.tools.map((tool: any, index: number) => (
+                          <li key={index}>{tool.name} - {tool.description}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Server Configuration */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  {t('dxt.serverName')}
+                </label>
+                <input
+                  type="text"
+                  id="serverName"
+                  defaultValue={manifestData.name}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder={t('dxt.serverNamePlaceholder')}
+                />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end space-x-4">
+                <button
+                  onClick={onCancel}
+                  disabled={isUploading}
+                  className="px-4 py-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50"
+                >
+                  {t('common.cancel')}
+                </button>
+                <button
+                  onClick={() => {
+                    const nameInput = document.getElementById('serverName') as HTMLInputElement;
+                    const serverName = nameInput?.value.trim() || manifestData.name;
+                    handleInstallServer(serverName);
+                  }}
+                  disabled={isUploading}
+                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 flex items-center"
+                >
+                  {isUploading ? (
+                    <>
+                      <svg className="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      {t('dxt.installing')}
+                    </>
+                  ) : (
+                    t('dxt.install')
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white shadow rounded-lg p-6 w-full max-w-lg">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold text-gray-900">{t('dxt.uploadTitle')}</h2>
+          <button onClick={onCancel} className="text-gray-500 hover:text-gray-700">
+            ✕
+          </button>
+        </div>
+
+        {error && (
+          <div className="mb-4 bg-red-50 border-l-4 border-red-500 p-4 rounded">
+            <p className="text-red-700">{error}</p>
+          </div>
+        )}
+
+        {/* File Drop Zone */}
+        <div
+          className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-colors ${isDragging
+            ? 'border-blue-500 bg-blue-50'
+            : selectedFile
+              ? 'border-green-500 bg-green-50'
+              : 'border-gray-300 hover:border-gray-400'
+            }`}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {selectedFile ? (
+            <div className="space-y-2">
+              <svg className="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <p className="text-sm text-gray-900 font-medium">{selectedFile.name}</p>
+              <p className="text-xs text-gray-500">{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+              </svg>
+              <div>
+                <p className="text-sm text-gray-900">{t('dxt.dropFileHere')}</p>
+                <p className="text-xs text-gray-500">{t('dxt.orClickToSelect')}</p>
+              </div>
+            </div>
+          )}
+
+          <input
+            type="file"
+            accept=".dxt"
+            onChange={handleFileSelect}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+        </div>
+
+        <div className="mt-6 flex justify-end space-x-4">
+          <button
+            onClick={onCancel}
+            disabled={isUploading}
+            className="px-4 py-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleUpload}
+            disabled={!selectedFile || isUploading}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 flex items-center"
+          >
+            {isUploading ? (
+              <>
+                <svg className="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {t('dxt.uploading')}
+              </>
+            ) : (
+              t('dxt.upload')
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DxtUploadForm;

frontend/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'info';
+}
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText,
+  cancelText,
+  variant = 'warning'
+}) => {
+  const { t } = useTranslation();
+
+  if (!isOpen) return null;
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'danger':
+        return {
+          icon: (
+            <svg className="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+            </svg>
+          ),
+          confirmClass: 'bg-red-600 hover:bg-red-700 text-white',
+        };
+      case 'warning':
+        return {
+          icon: (
+            <svg className="w-6 h-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+            </svg>
+          ),
+          confirmClass: 'bg-yellow-600 hover:bg-yellow-700 text-white',
+        };
+      case 'info':
+        return {
+          icon: (
+            <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          confirmClass: 'bg-blue-600 hover:bg-blue-700 text-white',
+        };
+      default:
+        return {
+          icon: null,
+          confirmClass: 'bg-blue-600 hover:bg-blue-700 text-white',
+        };
+    }
+  };
+
+  const { icon, confirmClass } = getVariantStyles();
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    } else if (e.key === 'Enter') {
+      onConfirm();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4"
+      onClick={handleBackdropClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      <div
+        className="bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-200 ease-out"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="confirm-dialog-title"
+        aria-describedby="confirm-dialog-message"
+      >
+        <div className="p-6">
+          <div className="flex items-start space-x-3">
+            {icon && (
+              <div className="flex-shrink-0">
+                {icon}
+              </div>
+            )}
+            <div className="flex-1">
+              {title && (
+                <h3
+                  id="confirm-dialog-title"
+                  className="text-lg font-medium text-gray-900 mb-2"
+                >
+                  {title}
+                </h3>
+              )}
+              <p
+                id="confirm-dialog-message"
+                className="text-gray-600 leading-relaxed"
+              >
+                {message}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-3 mt-6">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md transition-colors duration-150"
+              autoFocus
+            >
+              {cancelText || t('common.cancel')}
+            </button>
+            <button
+              onClick={onConfirm}
+              className={`px-4 py-2 rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 ${confirmClass}`}
+            >
+              {confirmText || t('common.confirm')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmDialog;

frontend/src/locales/en.json

@@ -174,7 +174,8 @@
     "copy": "Copy",
     "copySuccess": "Copied to clipboard",
     "copyFailed": "Copy failed",
-    "close": "Close"
+    "close": "Close",
+    "confirm": "Confirm"
   },
   "nav": {
     "dashboard": "Dashboard",
@@ -366,5 +367,30 @@
     "smartRoutingConfigUpdated": "Smart routing configuration updated successfully",
     "smartRoutingRequiredFields": "Database URL and OpenAI API Key are required to enable smart routing",
     "smartRoutingValidationError": "Please fill in the required fields before enabling Smart Routing: {{fields}}"
+  },
+  "dxt": {
+    "upload": "Upload",
+    "uploadTitle": "Upload DXT Extension",
+    "dropFileHere": "Drop your .dxt file here",
+    "orClickToSelect": "or click to select from your computer",
+    "invalidFileType": "Please select a valid .dxt file",
+    "noFileSelected": "Please select a .dxt file to upload",
+    "uploading": "Uploading...",
+    "uploadFailed": "Failed to upload DXT file",
+    "installServer": "Install MCP Server from DXT",
+    "extensionInfo": "Extension Information",
+    "name": "Name",
+    "version": "Version",
+    "description": "Description",
+    "author": "Author",
+    "tools": "Tools",
+    "serverName": "Server Name",
+    "serverNamePlaceholder": "Enter a name for this server",
+    "install": "Install",
+    "installing": "Installing...",
+    "installFailed": "Failed to install server from DXT",
+    "serverExistsTitle": "Server Already Exists",
+    "serverExistsConfirm": "Server '{{serverName}}' already exists. Do you want to override it with the new version?",
+    "override": "Override"
   }
 }

frontend/src/locales/zh.json

@@ -175,7 +175,8 @@
     "copy": "复制",
     "copySuccess": "已复制到剪贴板",
     "copyFailed": "复制失败",
-    "close": "关闭"
+    "close": "关闭",
+    "confirm": "确认"
   },
   "nav": {
     "dashboard": "仪表盘",
@@ -368,5 +369,30 @@
     "smartRoutingConfigUpdated": "智能路由配置更新成功",
     "smartRoutingRequiredFields": "启用智能路由需要填写数据库连接地址和 OpenAI API 密钥",
     "smartRoutingValidationError": "启用智能路由前请先填写必要字段：{{fields}}"
+  },
+  "dxt": {
+    "upload": "上传",
+    "uploadTitle": "上传 DXT 扩展",
+    "dropFileHere": "将 .dxt 文件拖拽到此处",
+    "orClickToSelect": "或点击从计算机选择",
+    "invalidFileType": "请选择有效的 .dxt 文件",
+    "noFileSelected": "请选择要上传的 .dxt 文件",
+    "uploading": "上传中...",
+    "uploadFailed": "上传 DXT 文件失败",
+    "installServer": "从 DXT 安装 MCP 服务器",
+    "extensionInfo": "扩展信息",
+    "name": "名称",
+    "version": "版本",
+    "description": "描述",
+    "author": "作者",
+    "tools": "工具",
+    "serverName": "服务器名称",
+    "serverNamePlaceholder": "为此服务器输入名称",
+    "install": "安装",
+    "installing": "安装中...",
+    "installFailed": "从 DXT 安装服务器失败",
+    "serverExistsTitle": "服务器已存在",
+    "serverExistsConfirm": "服务器 '{{serverName}}' 已存在。是否要用新版本覆盖它？",
+    "override": "覆盖"
   }
 }

frontend/src/pages/ServersPage.tsx

@@ -6,6 +6,7 @@ import ServerCard from '@/components/ServerCard';
 import AddServerForm from '@/components/AddServerForm';
 import EditServerForm from '@/components/EditServerForm';
 import { useServerData } from '@/hooks/useServerData';
+import DxtUploadForm from '@/components/DxtUploadForm';
 
 const ServersPage: React.FC = () => {
   const { t } = useTranslation();
@@ -23,6 +24,7 @@ const ServersPage: React.FC = () => {
   } = useServerData();
   const [editingServer, setEditingServer] = useState<Server | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [showDxtUpload, setShowDxtUpload] = useState(false);
 
   const handleEditClick = async (server: Server) => {
     const fullServerData = await handleServerEdit(server);
@@ -47,6 +49,12 @@ const ServersPage: React.FC = () => {
     }
   };
 
+  const handleDxtUploadSuccess = (_serverConfig: any) => {
+    // Close upload dialog and refresh servers
+    setShowDxtUpload(false);
+    triggerRefresh();
+  };
+
   return (
     <div>
       <div className="flex justify-between items-center mb-8">
@@ -62,6 +70,15 @@ const ServersPage: React.FC = () => {
             {t('nav.market')}
           </button>
           <AddServerForm onAdd={handleServerAdd} />
+          <button
+            onClick={() => setShowDxtUpload(true)}
+            className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.413V13H5.5z" />
+            </svg>
+            {t('dxt.upload')}
+          </button>
           <button
             onClick={handleRefresh}
             disabled={isRefreshing}
@@ -138,6 +155,13 @@ const ServersPage: React.FC = () => {
           onCancel={() => setEditingServer(null)}
         />
       )}
+
+      {showDxtUpload && (
+        <DxtUploadForm
+          onSuccess={handleDxtUploadSuccess}
+          onCancel={() => setShowDxtUpload(false)}
+        />
+      )}
     </div>
   );
 };