Add SSH remote host support for tunneling daemon connections

packages/app/src/components/add-host-method-modal.tsx

@@ -2,10 +2,10 @@ import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, Text, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { QrCode, Link2, ClipboardPaste } from "lucide-react-native";
+import { QrCode, Link2, ClipboardPaste, Terminal } from "lucide-react-native";
 import { AdaptiveModalSheet, type SheetHeader } from "./adaptive-modal-sheet";
 import { isFdroidBuild } from "@/constants/build-profile";
-import { isNative } from "@/constants/platform";
+import { isNative, isWeb } from "@/constants/platform";
 
 const styles = StyleSheet.create((theme) => ({
   option: {
@@ -39,6 +39,7 @@ export interface AddHostMethodModalProps {
   onDirectConnection: () => void;
   onScanQr: () => void;
   onPasteLink: () => void;
+  onSshConnection: () => void;
 }
 
 export function AddHostMethodModal({
@@ -47,6 +48,7 @@ export function AddHostMethodModal({
   onDirectConnection,
   onScanQr,
   onPasteLink,
+  onSshConnection,
 }: AddHostMethodModalProps) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
@@ -64,6 +66,10 @@ export function AddHostMethodModal({
     onPasteLink();
   }, [onPasteLink]);
 
+  const handleSsh = useCallback(() => {
+    onSshConnection();
+  }, [onSshConnection]);
+
   return (
     <AdaptiveModalSheet
       header={header}
@@ -103,6 +109,21 @@ export function AddHostMethodModal({
           </View>
         </Pressable>
       ) : null}
+      {isWeb ? (
+        <Pressable
+          style={styles.option}
+          onPress={handleSsh}
+          accessibilityRole="button"
+          accessibilityLabel="SSH"
+          testID="add-host-method-ssh"
+        >
+          <Terminal size={18} color={theme.colors.foreground} />
+          <View style={styles.optionBody}>
+            <Text style={styles.optionText}>SSH</Text>
+            <Text style={styles.optionSubtext}>Connect to a remote host via SSH tunnel</Text>
+          </View>
+        </Pressable>
+      ) : null}
 
       <Pressable
         style={styles.option}

packages/app/src/components/add-ssh-host-modal.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Terminal } from "lucide-react-native";
+import { AdaptiveModalSheet, AdaptiveTextInput, type SheetHeader } from "./adaptive-modal-sheet";
+import { Button } from "@/components/ui/button";
+import { useHostMutations } from "@/runtime/host-runtime";
+import { useIsCompactFormFactor } from "@/constants/layout";
+
+const styles = StyleSheet.create((theme) => ({
+  helper: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    marginBottom: theme.spacing[4],
+  },
+  field: {
+    marginBottom: theme.spacing[3],
+  },
+  hostField: {
+    flex: 1,
+  },
+  portField: {
+    width: 90,
+  },
+  row: {
+    flexDirection: "row",
+    gap: theme.spacing[3],
+  },
+  label: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    marginBottom: 4,
+  },
+  input: {
+    backgroundColor: theme.colors.surface2,
+    borderRadius: theme.borderRadius.lg,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    fontSize: theme.fontSize.base,
+    color: theme.colors.foreground,
+  },
+  error: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.destructive,
+    marginTop: theme.spacing[2],
+  },
+  progress: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    marginTop: theme.spacing[1],
+  },
+  buttonRow: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+    marginTop: theme.spacing[4],
+  },
+}));
+
+export interface AddSshHostModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onCancel?: () => void;
+  onSaved?: (result: { serverId: string; hostname: string | null }) => void;
+}
+
+export function AddSshHostModal({ visible, onClose, onCancel, onSaved }: AddSshHostModalProps) {
+  const { t } = useTranslation();
+  const { probeAndUpsertSshConnection } = useHostMutations();
+  const isMobile = useIsCompactFormFactor();
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [progressMessage, setProgressMessage] = useState("");
+  const [host, setHost] = useState("");
+  const [port, setPort] = useState("22");
+  const [user, setUser] = useState("");
+
+  const header = useMemo<SheetHeader>(() => ({ title: "SSH Connection" }), []);
+  const icon = useMemo(() => <Terminal size={16} />, []);
+
+  const clearInput = useCallback(() => {
+    setHost("");
+    setPort("22");
+    setUser("");
+    setErrorMessage("");
+    setProgressMessage("");
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (isSaving) return;
+    clearInput();
+    onClose();
+  }, [isSaving, clearInput, onClose]);
+
+  const handleCancel = useCallback(() => {
+    if (isSaving) return;
+    clearInput();
+    (onCancel ?? onClose)();
+  }, [isSaving, onCancel, onClose, clearInput]);
+
+  const handleSave = useCallback(async () => {
+    if (isSaving) return;
+    const trimmedHost = host.trim();
+    const trimmedUser = user.trim();
+    if (!trimmedHost) {
+      setErrorMessage("Host is required.");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setErrorMessage("");
+      setProgressMessage("");
+      const { serverId, hostname } = await probeAndUpsertSshConnection({
+        host: trimmedHost,
+        port: port.trim() ? Number(port) : undefined,
+        ...(trimmedUser ? { user: trimmedUser } : {}),
+        onProgress: (msg) => setProgressMessage(msg),
+      });
+      onSaved?.({ serverId, hostname });
+      handleClose();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setErrorMessage(message);
+      if (!isMobile) {
+        Alert.alert("SSH connection failed", message);
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  }, [host, user, port, isSaving, isMobile, onSaved, handleClose, probeAndUpsertSshConnection]);
+
+  return (
+    <AdaptiveModalSheet
+      header={header}
+      visible={visible}
+      onClose={handleClose}
+      testID="add-ssh-host-modal"
+    >
+      <Text style={styles.helper}>
+        Connect to a remote Paseo daemon over SSH. Paseo will install and launch the daemon on the
+        remote host if needed.
+      </Text>
+
+      <View style={styles.row}>
+        <View style={[styles.field, styles.hostField]}>
+          <Text style={styles.label}>Host</Text>
+          <AdaptiveTextInput
+            testID="ssh-host-input"
+            accessibilityLabel="Host"
+            value={host}
+            onChangeText={setHost}
+            placeholder="server.example.com"
+            style={styles.input}
+            autoCapitalize="none"
+            autoCorrect={false}
+            keyboardType="url"
+            editable={!isSaving}
+            returnKeyType="next"
+          />
+        </View>
+        <View style={[styles.field, styles.portField]}>
+          <Text style={styles.label}>Port</Text>
+          <AdaptiveTextInput
+            testID="ssh-port-input"
+            accessibilityLabel="Port"
+            value={port}
+            onChangeText={setPort}
+            placeholder="22"
+            style={styles.input}
+            keyboardType="number-pad"
+            editable={!isSaving}
+            returnKeyType="next"
+          />
+        </View>
+      </View>
+
+      <View style={styles.field}>
+        <Text style={styles.label}>User (optional)</Text>
+        <AdaptiveTextInput
+          testID="ssh-user-input"
+          accessibilityLabel="User"
+          value={user}
+          onChangeText={setUser}
+          placeholder="username"
+          style={styles.input}
+          autoCapitalize="none"
+          autoCorrect={false}
+          editable={!isSaving}
+          returnKeyType="next"
+        />
+      </View>
+
+      {errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
+      {isSaving && progressMessage ? <Text style={styles.progress}>{progressMessage}</Text> : null}
+
+      <View style={styles.buttonRow}>
+        <Button variant="ghost" onPress={handleCancel} disabled={isSaving}>
+          {t("common.actions.cancel")}
+        </Button>
+        <Button
+          variant="default"
+          onPress={handleSave}
+          disabled={isSaving}
+          leftIcon={icon}
+          testID="add-ssh-host-connect"
+        >
+          {isSaving ? "Connecting…" : "Connect"}
+        </Button>
+      </View>
+    </AdaptiveModalSheet>
+  );
+}

packages/app/src/desktop/host.ts

@@ -1,6 +1,7 @@
 import { Platform } from "react-native";
 import { getElectronHost } from "@/desktop/electron/host";
 import type { BrowserKeyboardPolicy } from "@/keyboard/browser-shortcuts";
+import type { NormalizedSshHostConnection } from "@getpaseo/protocol/host-connection-schema";
 import type { SessionInboundMessage, SessionOutboundMessage } from "@getpaseo/protocol/messages";
 
 type BrowserAutomationExecuteRequest = Extract<
@@ -169,6 +170,13 @@ export interface DesktopInvokeBridge {
   invoke?: (command: string, args?: Record<string, unknown>) => Promise<unknown>;
 }
 
+export type SshBridgeConfig = Omit<NormalizedSshHostConnection, "id" | "type">;
+
+export interface DesktopSshBridge {
+  openTunnel: (config: SshBridgeConfig) => Promise<{ tunnelId: string; localPort: number }>;
+  closeTunnel: (tunnelId: string) => Promise<void>;
+}
+
 export interface DesktopHostBridge {
   platform?: string;
   invoke?: DesktopInvokeBridge["invoke"];
@@ -183,6 +191,7 @@ export interface DesktopHostBridge {
   webUtils?: DesktopWebUtilsBridge;
   menu?: DesktopMenuBridge;
   browser?: DesktopBrowserBridge;
+  ssh?: DesktopSshBridge;
 }
 
 declare global {