[Init] Initial commit - NetMesh terminal manager

components/QuickConnectWizard.tsx

@@ -0,0 +1,802 @@
+import {
+  ArrowLeft,
+  ChevronDown,
+  Eye,
+  EyeOff,
+  Key,
+  Lock,
+  Plug,
+  Plus,
+  User,
+} from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import type { QuickConnectTarget } from "../domain/quickConnect";
+import { formatHostPort } from "../domain/host";
+import {
+  buildQuickConnectHost,
+  getQuickConnectDefaultPort,
+  isQuickConnectIdentityUsable,
+  type QuickConnectAuthMethod,
+  type QuickConnectProtocol,
+} from "../domain/quickConnectHost";
+import { cn } from "../lib/utils";
+import { Host, Identity, SSHKey } from "../types";
+import { Button } from "./ui/button";
+import { Combobox } from "./ui/combobox";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Dropdown, DropdownContent, DropdownTrigger } from "./ui/dropdown";
+import { ScrollArea } from "./ui/scroll-area";
+import { PROTOCOL_VISUAL_STYLES } from "./protocolVisuals";
+
+
+
+// Wizard steps
+type WizardStep = "protocol" | "username" | "knownhost" | "auth";
+
+interface QuickConnectWizardProps {
+  open: boolean;
+  target: QuickConnectTarget;
+  keys: SSHKey[];
+  identities: Identity[];
+  warnings?: string[];
+  onConnect: (host: Host) => void;
+  onSaveHost?: (host: Host) => void;
+  onAddKey?: () => void;
+  onClose: () => void;
+}
+
+const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
+  open,
+  target,
+  keys,
+  identities,
+  warnings,
+  onConnect,
+  onSaveHost,
+  onAddKey,
+  onClose,
+}) => {
+  const { t } = useI18n();
+  // Wizard state
+  const [step, setStep] = useState<WizardStep>("protocol");
+  const [protocol, setProtocol] = useState<QuickConnectProtocol>("ssh");
+  const [username, setUsername] = useState(target.username || "");
+  const [port, setPort] = useState<number>(target.port || 22);
+
+  // Known host verification state
+  const [knownHostInfo, setKnownHostInfo] = useState<{
+    keyType: string;
+    fingerprint: string;
+  } | null>(null);
+
+  // Auth state
+  const [authMethod, setAuthMethod] = useState<QuickConnectAuthMethod>("password");
+  const [password, setPassword] = useState("");
+  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
+  const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(null);
+  const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const selectedIdentity = useMemo(
+    () => identities.find((identity) => identity.id === selectedIdentityId),
+    [identities, selectedIdentityId],
+  );
+
+  // Reset state when target changes
+  React.useEffect(() => {
+    if (open) {
+      setStep("protocol");
+      setProtocol("ssh");
+      setUsername(target.username || "");
+      setPort(target.port || 22);
+      setPassword("");
+      setSelectedKeyId(null);
+      setSelectedIdentityId(null);
+      setSaveOptionsOpen(false);
+      setShowPassword(false);
+      setKnownHostInfo(null);
+    }
+  }, [open, target]);
+
+  const canUseSelectedIdentity = useMemo(
+    () => isQuickConnectIdentityUsable(selectedIdentity, keys, protocol),
+    [keys, protocol, selectedIdentity],
+  );
+  const identityOptions = useMemo(
+    () => identities.map((identity) => ({
+      value: identity.id,
+      label: identity.label,
+      sublabel: identity.username,
+      icon: <User size={14} />,
+    })),
+    [identities],
+  );
+
+  const detachSelectedIdentity = () => {
+    setSelectedIdentityId(null);
+    setAuthMethod("password");
+    setPassword("");
+    setSelectedKeyId(null);
+  };
+
+  const clearSelectedIdentity = () => {
+    detachSelectedIdentity();
+    setUsername(target.username || "");
+  };
+
+  const handleIdentitySelect = (identityId: string) => {
+    if (!identityId) {
+      clearSelectedIdentity();
+      return;
+    }
+    const identity = identities.find((candidate) => candidate.id === identityId);
+    if (!identity) return;
+    setSelectedIdentityId(identity.id);
+    setUsername(identity.username);
+    setAuthMethod(identity.authMethod);
+    setPassword("");
+    setSelectedKeyId(identity.keyId || null);
+  };
+
+  // Handle protocol selection
+  const handleProtocolSelect = (proto: QuickConnectProtocol) => {
+    setProtocol(proto);
+    if (proto === "telnet") {
+      if (selectedIdentityId) clearSelectedIdentity();
+      setAuthMethod("password");
+    }
+    if (port === getQuickConnectDefaultPort(protocol)) {
+      setPort(getQuickConnectDefaultPort(proto));
+    }
+  };
+
+  const handleProtocolPortChange = (
+    proto: QuickConnectProtocol,
+    rawValue: string,
+    fallbackPort: number,
+  ) => {
+    handleProtocolSelect(proto);
+    setPort(parseInt(rawValue) || fallbackPort);
+  };
+
+  // Navigate to next step
+  const handleContinue = () => {
+    switch (step) {
+      case "protocol":
+        if (canUseSelectedIdentity) {
+          handleConnect();
+          break;
+        }
+        // Always go to username step to let user confirm/edit username
+        setStep("username");
+        break;
+      case "username":
+        setStep("auth");
+        break;
+      case "knownhost":
+        setStep("auth");
+        break;
+      case "auth":
+        handleConnect();
+        break;
+    }
+  };
+
+  // Navigate back
+  const handleBack = () => {
+    switch (step) {
+      case "username":
+        setStep("protocol");
+        break;
+      case "knownhost":
+        setStep("username");
+        break;
+      case "auth":
+        // Always go back to username step
+        setStep("username");
+        break;
+    }
+  };
+
+  // Create host and connect
+  const handleConnect = (save = false) => {
+    const effectiveUsername = username || target.username || "root";
+    const effectivePort = port || getQuickConnectDefaultPort(protocol);
+    const now = Date.now();
+    const tempHost = buildQuickConnectHost({
+      id: `quick-${now}-${Math.random().toString(36).slice(2, 11)}`,
+      createdAt: now,
+      target,
+      protocol,
+      port: effectivePort,
+      username: effectiveUsername,
+      authMethod,
+      password,
+      selectedKeyId,
+      selectedIdentityId: selectedIdentity?.id,
+      save,
+    });
+
+    if (save && onSaveHost) {
+      onSaveHost(tempHost);
+    }
+
+    onConnect(tempHost);
+    onClose();
+  };
+
+  // Check if can proceed
+  const canProceed = useMemo(() => {
+    switch (step) {
+      case "protocol":
+        return true;
+      case "username":
+        return username.trim().length > 0;
+      case "knownhost":
+        return true;
+      case "auth":
+        if (selectedIdentity && protocol !== "telnet") return canUseSelectedIdentity;
+        if (authMethod === "password") {
+          // Whitespace-only passwords are valid SSH secrets (issue #2036).
+          return password.length > 0;
+        }
+        return Boolean(selectedKeyId && keys.some((key) => key.id === selectedKeyId));
+    }
+  }, [
+    step,
+    username,
+    authMethod,
+    password,
+    selectedKeyId,
+    selectedIdentity,
+    canUseSelectedIdentity,
+    keys,
+    protocol,
+  ]);
+
+  // Render protocol selection step
+  const renderProtocolStep = () => (
+    <div className="space-y-6">
+      <div className="space-y-4">
+      <h3 className="text-sm font-medium">{t("protocolSelect.chooseProtocol")}</h3>
+      <div className="space-y-3">
+        {/* SSH */}
+        <button
+          className={cn(
+            "w-full flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all text-left",
+            protocol === "ssh"
+              ? "border-primary bg-primary/5"
+              : "border-border/60 hover:border-border hover:bg-secondary/50",
+          )}
+          onClick={() => handleProtocolSelect("ssh")}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className={cn(
+                "h-10 w-10 rounded-lg flex items-center justify-center",
+                protocol === "ssh"
+                  ? PROTOCOL_VISUAL_STYLES.ssh.selected
+                  : PROTOCOL_VISUAL_STYLES.ssh.idle,
+              )}
+            >
+              {PROTOCOL_VISUAL_STYLES.ssh.icon}
+            </div>
+            <div>
+              <div className="font-medium">SSH</div>
+              <div className="text-xs text-muted-foreground font-mono">
+                ssh {target.hostname}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{t("protocolSelect.port")}</span>
+            <Input
+              type="number"
+              value={protocol === "ssh" ? port : 22}
+              onChange={(e) => handleProtocolPortChange("ssh", e.target.value, 22)}
+              onClick={(e) => e.stopPropagation()}
+              className="w-16 h-7 text-xs text-center"
+              min={1}
+              max={65535}
+            />
+          </div>
+        </button>
+
+        {/* Mosh */}
+        <button
+          className={cn(
+            "w-full flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all text-left",
+            protocol === "mosh"
+              ? "border-primary bg-primary/5"
+              : "border-border/60 hover:border-border hover:bg-secondary/50",
+          )}
+          onClick={() => handleProtocolSelect("mosh")}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className={cn(
+                "h-10 w-10 rounded-lg flex items-center justify-center",
+                protocol === "mosh"
+                  ? PROTOCOL_VISUAL_STYLES.mosh.selected
+                  : PROTOCOL_VISUAL_STYLES.mosh.idle,
+              )}
+            >
+              {PROTOCOL_VISUAL_STYLES.mosh.icon}
+            </div>
+            <div>
+              <div className="font-medium">Mosh</div>
+              <div className="text-xs text-muted-foreground font-mono">
+                mosh {target.hostname}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{t("protocolSelect.port")}</span>
+            <Input
+              type="number"
+              value={protocol === "mosh" ? port : 22}
+              onChange={(e) => handleProtocolPortChange("mosh", e.target.value, 22)}
+              onClick={(e) => e.stopPropagation()}
+              className="w-16 h-7 text-xs text-center"
+              min={1}
+              max={65535}
+            />
+          </div>
+        </button>
+
+        {/* Eternal Terminal */}
+        <button
+          className={cn(
+            "w-full flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all text-left",
+            protocol === "et"
+              ? "border-primary bg-primary/5"
+              : "border-border/60 hover:border-border hover:bg-secondary/50",
+          )}
+          onClick={() => handleProtocolSelect("et")}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className={cn(
+                "h-10 w-10 rounded-lg flex items-center justify-center",
+                protocol === "et"
+                  ? PROTOCOL_VISUAL_STYLES.et.selected
+                  : PROTOCOL_VISUAL_STYLES.et.idle,
+              )}
+            >
+              {PROTOCOL_VISUAL_STYLES.et.icon}
+            </div>
+            <div>
+              <div className="font-medium">Eternal Terminal</div>
+              <div className="text-xs text-muted-foreground font-mono">
+                et {target.hostname}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{t("protocolSelect.port")}</span>
+            <Input
+              type="number"
+              value={protocol === "et" ? port : 22}
+              onChange={(e) => handleProtocolPortChange("et", e.target.value, 22)}
+              onClick={(e) => e.stopPropagation()}
+              className="w-16 h-7 text-xs text-center"
+              min={1}
+              max={65535}
+            />
+          </div>
+        </button>
+
+        {/* Telnet */}
+        <button
+          className={cn(
+            "w-full flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all text-left",
+            protocol === "telnet"
+              ? "border-primary bg-primary/5"
+              : "border-border/60 hover:border-border hover:bg-secondary/50",
+          )}
+          onClick={() => handleProtocolSelect("telnet")}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className={cn(
+                "h-10 w-10 rounded-lg flex items-center justify-center",
+                protocol === "telnet"
+                  ? PROTOCOL_VISUAL_STYLES.telnet.selected
+                  : PROTOCOL_VISUAL_STYLES.telnet.idle,
+              )}
+            >
+              {PROTOCOL_VISUAL_STYLES.telnet.icon}
+            </div>
+            <div>
+              <div className="font-medium">Telnet</div>
+              <div className="text-xs text-muted-foreground font-mono">
+                telnet {target.hostname}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{t("protocolSelect.port")}</span>
+            <Input
+              type="number"
+              value={protocol === "telnet" ? port : 23}
+              onChange={(e) => handleProtocolPortChange("telnet", e.target.value, 23)}
+              onClick={(e) => e.stopPropagation()}
+              className="w-16 h-7 text-xs text-center"
+              min={1}
+              max={65535}
+            />
+          </div>
+        </button>
+      </div>
+      </div>
+
+      {protocol !== "telnet" && identities.length > 0 && (
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3">
+            <Label className="text-sm font-medium">{t("quickConnect.identity.label")}</Label>
+            <Combobox
+              options={identityOptions}
+              value={selectedIdentityId || undefined}
+              onValueChange={handleIdentitySelect}
+              placeholder={t("quickConnect.identity.placeholder")}
+              emptyText={t("quickConnect.identity.empty")}
+              icon={<User size={14} />}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {selectedIdentity
+              ? t("quickConnect.identity.selectedHint", { username: selectedIdentity.username })
+              : t("quickConnect.identity.hint")}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+
+  // Render username step
+  const renderUsernameStep = () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="quick-username">{t("terminal.auth.username")}</Label>
+        <Input
+          id="quick-username"
+          value={username}
+          onChange={(e) => {
+            if (selectedIdentityId) detachSelectedIdentity();
+            setUsername(e.target.value);
+          }}
+          placeholder={t("terminal.auth.username.placeholder")}
+          autoFocus
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && username.trim()) {
+              handleContinue();
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+
+  // Render known host verification step
+  const renderKnownHostStep = () => (
+    <div className="space-y-4">
+      <h3 className="text-base font-semibold text-amber-600 dark:text-amber-500">
+        {t("quickConnect.knownHost.title")}
+      </h3>
+      <div className="space-y-2 text-sm text-muted-foreground">
+        <p>{t("quickConnect.knownHost.authenticity", { hostname: target.hostname })}</p>
+        {knownHostInfo && (
+          <>
+            <p className="font-medium text-foreground">
+              {t("quickConnect.knownHost.fingerprintLabel", { keyType: knownHostInfo.keyType })}
+            </p>
+            <p className="font-mono text-xs bg-muted p-2 rounded break-all">
+              {knownHostInfo.fingerprint}
+            </p>
+          </>
+        )}
+        <p>{t("quickConnect.knownHost.addQuestion")}</p>
+      </div>
+    </div>
+  );
+
+  // Render auth step
+  const renderAuthStep = () => (
+    <div className="space-y-4">
+      {selectedIdentity ? (
+        <div className="rounded-xl border border-primary/40 bg-primary/5 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="h-9 w-9 rounded-lg bg-primary/15 text-primary flex items-center justify-center">
+              <User size={16} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="font-medium truncate">{selectedIdentity.label}</div>
+              <div className="text-xs text-muted-foreground truncate">
+                {selectedIdentity.username} · {t(`quickConnect.identity.method.${selectedIdentity.authMethod}`)}
+              </div>
+            </div>
+          </div>
+          {!canUseSelectedIdentity && (
+            <p className="text-xs text-destructive">
+              {t("quickConnect.identity.unavailable")}
+            </p>
+          )}
+          <Button variant="outline" size="sm" className="w-full" onClick={detachSelectedIdentity}>
+            {t("quickConnect.identity.useCustom")}
+          </Button>
+        </div>
+      ) : (
+        <>
+      {/* Auth method tabs */}
+      <div className="flex gap-1 p-1 bg-secondary/80 rounded-lg border border-border/60">
+        <button
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
+            authMethod === "password"
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground hover:bg-secondary",
+          )}
+          onClick={() => {
+            setSelectedIdentityId(null);
+            setAuthMethod("password");
+          }}
+        >
+          <Lock size={14} />
+          {t("terminal.auth.password")}
+        </button>
+        <button
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
+            authMethod !== "password"
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground hover:bg-secondary",
+          )}
+          onClick={() => {
+            setSelectedIdentityId(null);
+            setAuthMethod("key");
+          }}
+        >
+          <Key size={14} />
+          {t("terminal.auth.sshKey")}
+        </button>
+      </div>
+
+      {/* Password field */}
+      {authMethod === "password" && (
+        <div className="space-y-2">
+          <Label htmlFor="quick-password">{t("terminal.auth.passwordLabel")}</Label>
+          <div className="relative">
+            <Input
+              id="quick-password"
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder={t("terminal.auth.password.placeholder")}
+              className="pr-10"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && password.length > 0) {
+                  handleConnect();
+                }
+              }}
+            />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Key selection */}
+      {authMethod === "key" && (
+        <div className="space-y-2">
+          {keys.filter((k) => k.category === "key").length === 0 ? (
+            <div className="text-sm text-muted-foreground p-3 border border-dashed border-border/60 rounded-lg text-center">
+              {t("terminal.auth.noKeysHint")}
+            </div>
+          ) : (
+            <ScrollArea className="max-h-48">
+              <div className="space-y-2">
+                {keys
+                  .filter((k) => k.category === "key")
+                  .map((key) => (
+                    <button
+                      key={key.id}
+                      className={cn(
+                        "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border transition-colors text-left",
+                        selectedKeyId === key.id
+                          ? "border-primary bg-primary/5"
+                          : "border-border/50 hover:bg-secondary/50",
+                      )}
+                      onClick={() => {
+                        setSelectedIdentityId(null);
+                        setSelectedKeyId(key.id);
+                      }}
+                    >
+                      <div
+                        className={cn(
+                          "h-8 w-8 rounded-lg flex items-center justify-center",
+                          "bg-primary/20 text-primary",
+                        )}
+                      >
+                        <Key size={14} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-medium truncate">
+                          {key.label}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Type {key.type}
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+              </div>
+            </ScrollArea>
+          )}
+
+          {onAddKey && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full mt-2"
+              onClick={onAddKey}
+            >
+              <Plus size={14} className="mr-2" />
+              Add key
+            </Button>
+          )}
+        </div>
+      )}
+        </>
+      )}
+    </div>
+  );
+
+  const hostEndpoint = formatHostPort(target.hostname, port || getQuickConnectDefaultPort(protocol));
+  const connectTitle = t("quickConnect.connectTitle", { host: hostEndpoint });
+  const protocolLabel = protocol === "et" ? "ET" : protocol.toUpperCase();
+  const effectiveUsername = username || target.username || "";
+  const connectSubtitle = step === "protocol"
+    ? null
+    : (
+      effectiveUsername
+        ? `${protocolLabel} ${effectiveUsername}@${hostEndpoint}`
+        : `${protocolLabel} ${hostEndpoint}`
+    );
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div
+        className="w-[560px] max-w-[90vw] bg-background border border-border rounded-2xl animate-in fade-in-0 zoom-in-95 duration-200"
+        style={{
+          boxShadow:
+            "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-border/50">
+          <div className="flex items-center gap-2 min-w-0">
+            <Plug size={18} className="shrink-0 text-foreground" />
+            <div className="min-w-0">
+              <h2 className="text-base font-semibold truncate">{connectTitle}</h2>
+              {connectSubtitle ? (
+                <p className="text-xs text-muted-foreground font-mono truncate">{connectSubtitle}</p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+
+        {warnings && warnings.length > 0 && (
+          <div className="px-6 pb-2">
+            <div className="text-xs text-amber-600 bg-amber-500/10 border border-amber-500/30 rounded-lg px-3 py-2">
+              {t("quickConnect.warning.unparsedOptions", {
+                options: warnings.join(", "),
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="px-6 py-4">
+          {step === "protocol" && renderProtocolStep()}
+          {step === "username" && renderUsernameStep()}
+          {step === "knownhost" && renderKnownHostStep()}
+          {step === "auth" && renderAuthStep()}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-border/50 flex items-center justify-between">
+          <Button
+            variant="secondary"
+            onClick={step === "protocol" ? onClose : handleBack}
+          >
+            {step === "protocol" ? (
+              t("common.close")
+            ) : (
+              <>
+                <ArrowLeft size={14} className="mr-2" />
+                {t("common.back")}
+              </>
+            )}
+          </Button>
+
+          {step === "knownhost" ? (
+            <div className="flex items-center gap-2">
+              <Button variant="secondary" onClick={handleContinue}>
+                {t("common.continue")}
+              </Button>
+              <Button
+                onClick={() => {
+                  // Add to known hosts then continue
+                  handleContinue();
+                }}
+              >
+                {t("quickConnect.knownHost.addAndContinue")}
+              </Button>
+            </div>
+          ) : step === "auth" ? (
+            <div className="flex items-center gap-2">
+              {onAddKey &&
+                authMethod === "key" &&
+                keys.filter((k) => k.category === "key").length === 0 && (
+                  <Button variant="secondary" onClick={onAddKey}>
+                    {t("quickConnect.addKey")}
+                  </Button>
+                )}
+              <Dropdown open={saveOptionsOpen} onOpenChange={setSaveOptionsOpen}>
+                <div className="flex items-center rounded-md bg-primary text-primary-foreground">
+                  <Button
+                    disabled={!canProceed}
+                    onClick={() => handleConnect(false)}
+                    className="rounded-r-none bg-transparent hover:bg-white/10 shadow-none"
+                  >
+                    {t("common.continue")}
+                  </Button>
+                  <DropdownTrigger asChild>
+                    <Button
+                      disabled={!canProceed}
+                      aria-label={t("terminal.auth.continueSave")}
+                      aria-haspopup="menu"
+                      aria-expanded={saveOptionsOpen}
+                      className="px-2 rounded-l-none bg-transparent hover:bg-white/10 border-l border-primary-foreground/20 shadow-none"
+                    >
+                      <ChevronDown size={14} />
+                    </Button>
+                  </DropdownTrigger>
+                </div>
+                <DropdownContent className="w-44 p-1 z-50" align="end">
+                  <button
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-secondary rounded-md"
+                    onClick={() => handleConnect(true)}
+                    disabled={!canProceed}
+                  >
+                    {t("terminal.auth.continueSave")}
+                  </button>
+                </DropdownContent>
+              </Dropdown>
+            </div>
+          ) : (
+            <Button onClick={handleContinue} disabled={!canProceed}>
+              {step === "protocol" && canUseSelectedIdentity
+                ? t("quickConnect.identity.connect")
+                : t("common.continue")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuickConnectWizard;