@libredb/studio 0.9.7

package/src/components/ConnectionModal.tsx

@@ -0,0 +1,759 @@
+"use client";
+
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { DatabaseConnection, ConnectionEnvironment, ENVIRONMENT_COLORS, ENVIRONMENT_LABELS, SSLMode } from '@/lib/types';
+import { Database, ShieldCheck, Zap, Globe, Key, Link, CheckCircle2, XCircle, ClipboardPaste, Lock, ChevronDown, Terminal, Settings2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { getDBConfig } from '@/lib/db-ui-config';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useConnectionForm } from '@/hooks/use-connection-form';
+import { useIsMobile } from '@/hooks/use-mobile';
+
+interface ConnectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConnect: (conn: DatabaseConnection) => void;
+  editConnection?: DatabaseConnection | null;
+  /** Optional API adapter: when provided, bypasses the built-in /api/db/test-connection fetch. */
+  onTestConnection?: (connection: DatabaseConnection) => Promise<{ success: boolean; latency?: number; error?: string }>;
+}
+
+export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, onTestConnection }: ConnectionModalProps) {
+  const isMobile = useIsMobile();
+  const {
+    // Connection fields
+    type, setType,
+    name, setName,
+    host, setHost,
+    port, setPort,
+    user, setUser,
+    password, setPassword,
+    database, setDatabase,
+    connectionString, setConnectionString,
+    mongoConnectionMode, setMongoConnectionMode,
+    environment, setEnvironment,
+
+    // UI state
+    isTesting,
+    testResult, setTestResult,
+    pasteInput, setPasteInput,
+    showPasteInput, setShowPasteInput,
+    isEditMode,
+
+    // SSL/TLS
+    showSSL, setShowSSL,
+    sslMode, setSSLMode,
+    caCert, setCaCert,
+    clientCert, setClientCert,
+    clientKey, setClientKey,
+
+    // Advanced (Oracle/MSSQL)
+    showAdvanced, setShowAdvanced,
+    serviceName, setServiceName,
+    instanceName, setInstanceName,
+
+    // SSH Tunnel
+    showSSH, setShowSSH,
+    sshEnabled, setSSHEnabled,
+    sshHost, setSSHHost,
+    sshPort, setSSHPort,
+    sshUsername, setSSHUsername,
+    sshAuthMethod, setSSHAuthMethod,
+    sshPassword, setSSHPassword,
+    sshPrivateKey, setSSHPrivateKey,
+    sshPassphrase, setSSHPassphrase,
+
+    // Handlers
+    handleTestConnection,
+    handleConnect,
+    handlePasteConnectionString,
+
+    // Derived data
+    dbTypes,
+  } = useConnectionForm({ isOpen, onClose, onConnect, editConnection, onTestConnection });
+
+  const formContent = (
+    <>
+      {/* Progress bar — fixed top */}
+      <div className="shrink-0 h-2 w-full bg-blue-600/20">
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: '100%' }}
+          className="h-full bg-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)]"
+        />
+      </div>
+
+      {/* Scrollable body */}
+      <div className="flex-1 overflow-y-auto p-4 md:p-8">
+        <div className="mb-4 md:mb-8">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 rounded-xl bg-blue-500/10 border border-blue-500/20">
+              <Zap className="w-5 h-5 text-blue-400" />
+            </div>
+            <h2 className="text-xl md:text-2xl font-bold tracking-tight">
+              {isEditMode ? 'Edit Connection' : 'New Connection'}
+            </h2>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-zinc-500">
+              {isEditMode ? 'Update your database connection parameters.' : 'Configure your database connection parameters securely.'}
+            </p>
+            {!isEditMode && (
+              <button
+                onClick={() => setShowPasteInput(!showPasteInput)}
+                className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
+              >
+                <ClipboardPaste className="w-3 h-3" />
+                Paste URL
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Paste Connection String Input */}
+        <AnimatePresence>
+          {showPasteInput && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="mb-6 overflow-hidden"
+            >
+              <div className="p-3 rounded-lg border border-blue-500/20 bg-blue-500/5 space-y-2">
+                <Label className="text-[10px] font-bold uppercase tracking-wider text-blue-400">
+                  Paste Connection URL
+                </Label>
+                <div className="flex gap-2">
+                  <Input
+                    value={pasteInput}
+                    onChange={(e) => setPasteInput(e.target.value)}
+                    placeholder="postgres://user:pass@host:5432/db  or  mongodb://..."
+                    className="h-9 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 text-sm font-mono flex-1"
+                    onKeyDown={(e) => e.key === 'Enter' && handlePasteConnectionString()}
+                  />
+                  <Button
+                    size="sm"
+                    onClick={handlePasteConnectionString}
+                    className="bg-blue-600 hover:bg-blue-500 text-white h-9 px-4 text-xs font-bold"
+                  >
+                    Parse
+                  </Button>
+                </div>
+                <p className="text-[10px] text-zinc-500">
+                  Supports: postgres://, mysql://, mongodb://, redis://, oracle://, mssql://
+                </p>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="space-y-4 md:space-y-6">
+          {/* Connection Name - always visible */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 mb-1">
+              <Database className="w-3 h-3 text-zinc-500" />
+              <Label htmlFor="name" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Connection Name</Label>
+            </div>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="My Database"
+              className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+            />
+          </div>
+
+          {/* Environment Selector */}
+          <div className="space-y-2">
+            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Environment</Label>
+            <div className="flex flex-wrap items-center gap-2">
+              {(Object.keys(ENVIRONMENT_COLORS) as ConnectionEnvironment[]).map((env) => (
+                <button
+                  key={env}
+                  onClick={() => setEnvironment(env)}
+                  className={cn(
+                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                    environment === env
+                      ? "border-white/20 bg-white/5 text-zinc-200"
+                      : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                  )}
+                >
+                  <div
+                    className="w-2 h-2 rounded-full"
+                    style={{ backgroundColor: ENVIRONMENT_COLORS[env] }}
+                  />
+                  {env === 'other' ? 'Other' : ENVIRONMENT_LABELS[env]}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* DB Type Selector */}
+          <div className="grid grid-cols-2 gap-3">
+            {dbTypes.map((db) => (
+              <button
+                key={db.value}
+                onClick={() => {
+                  setType(db.value);
+                  const cfg = getDBConfig(db.value);
+                  if (cfg.defaultPort) setPort(cfg.defaultPort);
+                  setTestResult(null);
+                }}
+                disabled={isEditMode}
+                className={cn(
+                  "flex flex-col items-center justify-center p-3 md:p-4 rounded-xl border transition-all duration-200 gap-2 group",
+                  type === db.value
+                    ? "bg-blue-600/10 border-blue-500/50 shadow-[0_0_20px_rgba(59,130,246,0.1)]"
+                    : "bg-zinc-900/50 border-white/5 hover:border-white/10 hover:bg-zinc-900",
+                  isEditMode && type !== db.value && "opacity-30 cursor-not-allowed"
+                )}
+              >
+                <db.icon className={cn("w-6 h-6 mb-1 transition-transform group-hover:scale-110", type === db.value ? db.color : "text-zinc-600")} />
+                <span className={cn("text-xs font-semibold", type === db.value ? "text-zinc-200" : "text-zinc-500")}>
+                  {db.label}
+                </span>
+              </button>
+            ))}
+          </div>
+
+            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <>
+                {/* Connection string mode toggle */}
+                  {getDBConfig(type).showConnectionStringToggle && (
+                    <div className="flex items-center gap-2 p-1 rounded-lg bg-zinc-900/50 border border-white/5">
+                      <button
+                        onClick={() => setMongoConnectionMode('host')}
+                        className={cn(
+                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-bold transition-all",
+                          mongoConnectionMode === 'host'
+                            ? "bg-blue-600/20 text-blue-400 border border-blue-500/30"
+                            : "text-zinc-500 hover:text-zinc-300"
+                        )}
+                      >
+                        <Globe className="w-3 h-3" />
+                        Host / Port
+                      </button>
+                      <button
+                        onClick={() => setMongoConnectionMode('connectionString')}
+                        className={cn(
+                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-bold transition-all",
+                          mongoConnectionMode === 'connectionString'
+                            ? "bg-blue-600/20 text-blue-400 border border-blue-500/30"
+                            : "text-zinc-500 hover:text-zinc-300"
+                        )}
+                      >
+                        <Link className="w-3 h-3" />
+                        Connection String
+                      </button>
+                    </div>
+                  )}
+
+                  {getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === 'connectionString' ? (
+                    <>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Link className="w-3 h-3 text-zinc-500" />
+                          <Label htmlFor="connectionString" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Connection URI</Label>
+                        </div>
+                        <Input
+                          id="connectionString"
+                          value={connectionString}
+                          onChange={(e) => setConnectionString(e.target.value)}
+                          placeholder="mongodb://localhost:27017/mydb  or  mongodb+srv://..."
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Database className="w-3 h-3 text-zinc-500" />
+                          <Label htmlFor="database" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Database Name (optional override)</Label>
+                        </div>
+                        <Input
+                          id="database"
+                          value={database}
+                          onChange={(e) => setDatabase(e.target.value)}
+                          placeholder="Extracted from URI if not provided"
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                        />
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Globe className="w-3 h-3 text-zinc-500" />
+                          <Label htmlFor="host" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Host & Instance</Label>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                          <Input
+                            id="host"
+                            value={host}
+                            onChange={(e) => setHost(e.target.value)}
+                            placeholder="localhost"
+                            className="md:col-span-3 h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                          />
+                          <Input
+                            id="port"
+                            value={port}
+                            onChange={(e) => setPort(e.target.value)}
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2 mb-1">
+                            <Key className="w-3 h-3 text-zinc-500" />
+                            <Label htmlFor="user" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                          </div>
+                          <Input
+                            id="user"
+                            value={user}
+                            onChange={(e) => setUser(e.target.value)}
+                            placeholder="postgres"
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2 mb-1">
+                            <ShieldCheck className="w-3 h-3 text-zinc-500" />
+                            <Label htmlFor="password" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Password</Label>
+                          </div>
+                          <Input
+                            id="password"
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            placeholder="••••••••"
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Database className="w-3 h-3 text-zinc-500" />
+                          <Label htmlFor="database" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Database Name</Label>
+                        </div>
+                        <Input
+                          id="database"
+                          value={database}
+                          onChange={(e) => setDatabase(e.target.value)}
+                          placeholder="production_db"
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                        />
+                      </div>
+                    </>
+                  )}
+              </>
+            </div>
+
+          {/* Advanced Settings (Oracle/MSSQL) */}
+          {(type === 'oracle' || type === 'mssql') && (
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={() => setShowAdvanced(!showAdvanced)}
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+              >
+                <Settings2 className="w-3.5 h-3.5 text-orange-500" />
+                <span>Advanced</span>
+                {(serviceName || instanceName) && (
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-orange-500/10 text-orange-400 border border-orange-500/20">
+                    SET
+                  </span>
+                )}
+                <ChevronDown className={cn("w-3 h-3 ml-auto transition-transform", showAdvanced && "rotate-180")} />
+              </button>
+              <AnimatePresence>
+                {showAdvanced && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="p-3 rounded-lg border border-orange-500/10 bg-orange-500/5 space-y-3">
+                      {type === 'oracle' && (
+                        <div className="space-y-1.5">
+                          <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Service Name</Label>
+                          <Input
+                            value={serviceName}
+                            onChange={(e) => setServiceName(e.target.value)}
+                            placeholder="ORCL or XEPDB1"
+                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
+                          />
+                          <p className="text-[10px] text-zinc-500">
+                            If empty, the Database Name field is used as the service name.
+                          </p>
+                        </div>
+                      )}
+                      {type === 'mssql' && (
+                        <div className="space-y-1.5">
+                          <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Instance Name</Label>
+                          <Input
+                            value={instanceName}
+                            onChange={(e) => setInstanceName(e.target.value)}
+                            placeholder="SQLEXPRESS"
+                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
+                          />
+                          <p className="text-[10px] text-zinc-500">
+                            For named instances (e.g. SQLEXPRESS). Leave empty for default instance.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+
+          {/* SSL/TLS & SSH Panels - only for non-sqlite */}
+          {type !== 'sqlite' && (
+            <div className="space-y-2">
+              {/* SSL/TLS Toggle */}
+              <button
+                type="button"
+                onClick={() => setShowSSL(!showSSL)}
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+              >
+                <Lock className="w-3.5 h-3.5 text-emerald-500" />
+                <span>SSL / TLS</span>
+                {sslMode !== 'disable' && (
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+                    {sslMode.toUpperCase()}
+                  </span>
+                )}
+                <ChevronDown className={cn("w-3 h-3 ml-auto transition-transform", showSSL && "rotate-180")} />
+              </button>
+              <AnimatePresence>
+                {showSSL && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="p-3 rounded-lg border border-emerald-500/10 bg-emerald-500/5 space-y-3">
+                      <div className="space-y-2">
+                        <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSL Mode</Label>
+                        <div className="flex flex-wrap gap-1.5">
+                          {(['disable', 'require', 'verify-ca', 'verify-full'] as SSLMode[]).map((mode) => (
+                            <button
+                              key={mode}
+                              type="button"
+                              onClick={() => setSSLMode(mode)}
+                              className={cn(
+                                "px-2.5 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                sslMode === mode
+                                  ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
+                                  : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                              )}
+                            >
+                              {mode}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                      {sslMode !== 'disable' && (
+                        <div className="space-y-3">
+                          <div className="space-y-1.5">
+                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">CA Certificate (PEM)</Label>
+                            <textarea
+                              value={caCert}
+                              onChange={(e) => setCaCert(e.target.value)}
+                              placeholder="-----BEGIN CERTIFICATE-----&#10;Paste CA cert content here...&#10;-----END CERTIFICATE-----"
+                              rows={3}
+                              className="w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                            />
+                          </div>
+                          {(sslMode === 'verify-ca' || sslMode === 'verify-full') && (
+                            <>
+                              <div className="space-y-1.5">
+                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Client Certificate (PEM)</Label>
+                                <textarea
+                                  value={clientCert}
+                                  onChange={(e) => setClientCert(e.target.value)}
+                                  placeholder="-----BEGIN CERTIFICATE-----&#10;Optional client cert...&#10;-----END CERTIFICATE-----"
+                                  rows={3}
+                                  className="w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                                />
+                              </div>
+                              <div className="space-y-1.5">
+                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Client Private Key (PEM)</Label>
+                                <textarea
+                                  value={clientKey}
+                                  onChange={(e) => setClientKey(e.target.value)}
+                                  placeholder="-----BEGIN PRIVATE KEY-----&#10;Optional client key...&#10;-----END PRIVATE KEY-----"
+                                  rows={3}
+                                  className="w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                                />
+                              </div>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* SSH Tunnel Toggle */}
+              <button
+                type="button"
+                onClick={() => setShowSSH(!showSSH)}
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+              >
+                <Terminal className="w-3.5 h-3.5 text-purple-500" />
+                <span>SSH Tunnel</span>
+                {sshEnabled && (
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-purple-500/10 text-purple-400 border border-purple-500/20">
+                    ON
+                  </span>
+                )}
+                <ChevronDown className={cn("w-3 h-3 ml-auto transition-transform", showSSH && "rotate-180")} />
+              </button>
+              <AnimatePresence>
+                {showSSH && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="p-3 rounded-lg border border-purple-500/10 bg-purple-500/5 space-y-3">
+                      <label className="flex items-center gap-2 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={sshEnabled}
+                          onChange={(e) => setSSHEnabled(e.target.checked)}
+                          className="rounded border-white/20 bg-zinc-900/50"
+                        />
+                        <span className="text-xs font-semibold text-zinc-300">Enable SSH Tunnel</span>
+                      </label>
+                      {sshEnabled && (
+                        <div className="space-y-3">
+                          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                            <div className="md:col-span-3 space-y-1.5">
+                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSH Host</Label>
+                              <Input
+                                value={sshHost}
+                                onChange={(e) => setSSHHost(e.target.value)}
+                                placeholder="bastion.example.com"
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                              />
+                            </div>
+                            <div className="space-y-1.5">
+                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Port</Label>
+                              <Input
+                                value={sshPort}
+                                onChange={(e) => setSSHPort(e.target.value)}
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm font-mono"
+                              />
+                            </div>
+                          </div>
+                          <div className="space-y-1.5">
+                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                            <Input
+                              value={sshUsername}
+                              onChange={(e) => setSSHUsername(e.target.value)}
+                              placeholder="ubuntu"
+                              className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Auth Method</Label>
+                            <div className="flex gap-2">
+                              <button
+                                type="button"
+                                onClick={() => setSSHAuthMethod('password')}
+                                className={cn(
+                                  "flex-1 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                  sshAuthMethod === 'password'
+                                    ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
+                                    : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                                )}
+                              >
+                                Password
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => setSSHAuthMethod('privateKey')}
+                                className={cn(
+                                  "flex-1 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                  sshAuthMethod === 'privateKey'
+                                    ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
+                                    : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                                )}
+                              >
+                                Private Key
+                              </button>
+                            </div>
+                          </div>
+                          {sshAuthMethod === 'password' ? (
+                            <div className="space-y-1.5">
+                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSH Password</Label>
+                              <Input
+                                type="password"
+                                value={sshPassword}
+                                onChange={(e) => setSSHPassword(e.target.value)}
+                                placeholder="••••••••"
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                              />
+                            </div>
+                          ) : (
+                            <div className="space-y-3">
+                              <div className="space-y-1.5">
+                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Private Key (PEM)</Label>
+                                <textarea
+                                  value={sshPrivateKey}
+                                  onChange={(e) => setSSHPrivateKey(e.target.value)}
+                                  placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;Paste private key here...&#10;-----END OPENSSH PRIVATE KEY-----"
+                                  rows={4}
+                                  className="w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-purple-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                                />
+                              </div>
+                              <div className="space-y-1.5">
+                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Passphrase (optional)</Label>
+                                <Input
+                                  type="password"
+                                  value={sshPassphrase}
+                                  onChange={(e) => setSSHPassphrase(e.target.value)}
+                                  placeholder="Key passphrase (if encrypted)"
+                                  className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+
+          {/* Test Result */}
+          <AnimatePresence>
+            {testResult && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                className="overflow-hidden"
+              >
+                <div className={cn(
+                  "flex items-center gap-2 p-3 rounded-lg border text-xs",
+                  testResult.success
+                    ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400"
+                    : "bg-red-500/5 border-red-500/20 text-red-400"
+                )}>
+                  {testResult.success ? (
+                    <CheckCircle2 className="w-4 h-4 shrink-0" />
+                  ) : (
+                    <XCircle className="w-4 h-4 shrink-0" />
+                  )}
+                  <span className="leading-relaxed">{testResult.message}</span>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Sticky footer */}
+      <div className="shrink-0 bg-zinc-900/30 p-4 md:p-6 border-t border-white/5">
+        <div className="flex flex-col-reverse gap-3 md:flex-row md:items-center md:justify-between">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            className="w-full md:w-auto text-zinc-500 hover:text-zinc-200 hover:bg-white/5 text-xs font-semibold"
+          >
+            Cancel
+          </Button>
+          <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-2">
+            <Button
+              variant="outline"
+              onClick={handleTestConnection}
+              disabled={isTesting}
+              className="w-full md:w-auto border-white/10 text-zinc-400 hover:text-white hover:bg-white/5 text-xs font-bold h-10 px-4"
+            >
+              {isTesting ? (
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 border-2 border-zinc-400/30 border-t-zinc-400 rounded-full animate-spin" />
+                  Testing...
+                </div>
+              ) : (
+                'Test Connection'
+              )}
+            </Button>
+            <Button
+              onClick={handleConnect}
+              disabled={isTesting || (getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === 'connectionString' && !connectionString.trim())}
+              className="w-full md:w-auto min-w-0 md:min-w-[140px] bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs h-10 shadow-lg shadow-blue-900/20 group relative overflow-hidden"
+            >
+              <AnimatePresence mode="wait">
+                {isTesting ? (
+                  <motion.div
+                    key="testing"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex items-center gap-2"
+                  >
+                    <div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                    Connecting...
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="connect"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex items-center gap-2"
+                  >
+                    {isEditMode ? 'Save Changes' : 'Establish Connection'}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
+        <DrawerContent className="max-h-[95dvh] bg-[#0a0a0a] border-white/5 text-zinc-200 p-0 flex flex-col">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>{isEditMode ? 'Edit Connection' : 'New Connection'}</DrawerTitle>
+            <DrawerDescription>Configure database connection parameters.</DrawerDescription>
+          </DrawerHeader>
+          {formContent}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className="sm:max-w-[500px] lg:max-w-[540px] max-h-[90vh] bg-[#0a0a0a] border-white/5 text-zinc-200 p-0 overflow-hidden shadow-2xl flex flex-col"
+        showCloseButton={false}
+      >
+        <DialogTitle className="sr-only">{isEditMode ? 'Edit Connection' : 'New Connection'}</DialogTitle>
+        <DialogDescription className="sr-only">Configure database connection parameters.</DialogDescription>
+        {formContent}
+      </DialogContent>
+    </Dialog>
+  );
+}