Initial commit: RustDesk 1.4.7 macOS desktop port

- Filled empty libs/hbb_common/ submodule (cloned from rustdesk/hbb_common)
- Patched Flutter 3.44 / Dart 3.12 compatibility:
  * flutter/lib/generated_bridge.dart: asTypedList with cast<>, DartPort=Int64
  * flutter/lib/common.dart: DialogTheme->DialogThemeData, TabBarTheme->TabBarThemeData
  * flutter/pubspec.yaml: extended_text 14.0.0->15.0.2, google_fonts override 5.0.0
  * flutter/macos/Runner/Configs/Release.xcconfig: EXCLUDED_ARCHS=x86_64
- Build verified: cargo check + cargo build --features flutter + cargo build --release --features flutter
- Verified flutter build macos --debug and --release both produce working .app
- Verified .dmg installer (27MB arm64) created via hdiutil
- Build deps: Xcode 26.5, CocoaPods 1.16.2, Flutter 3.44, VCPKG arm64-osx

flutter/lib/desktop/pages/connection_page.dart

@@ -0,0 +1,615 @@
+// main window right pane
+
+import 'dart:async';
+import 'dart:convert';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common/widgets/connection_page_title.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/desktop/widgets/popup_menu.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:get/get.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+import 'package:window_manager/window_manager.dart';
+import 'package:flutter_hbb/models/peer_model.dart';
+
+import '../../common.dart';
+import '../../common/formatter/id_formatter.dart';
+import '../../common/widgets/peer_tab_page.dart';
+import '../../common/widgets/autocomplete.dart';
+import '../../models/platform_model.dart';
+import '../../desktop/widgets/material_mod_popup_menu.dart' as mod_menu;
+
+class OnlineStatusWidget extends StatefulWidget {
+  const OnlineStatusWidget({Key? key, this.onSvcStatusChanged})
+      : super(key: key);
+
+  final VoidCallback? onSvcStatusChanged;
+
+  @override
+  State<OnlineStatusWidget> createState() => _OnlineStatusWidgetState();
+}
+
+/// State for the connection page.
+class _OnlineStatusWidgetState extends State<OnlineStatusWidget> {
+  final _svcStopped = Get.find<RxBool>(tag: 'stop-service');
+  final _svcIsUsingPublicServer = true.obs;
+  Timer? _updateTimer;
+
+  double get em => 14.0;
+  double? get height => bind.isIncomingOnly() ? null : em * 3;
+
+  void onUsePublicServerGuide() {
+    const url = "https://rustdesk.com/pricing";
+    canLaunchUrlString(url).then((can) {
+      if (can) {
+        launchUrlString(url);
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _updateTimer = periodic_immediate(Duration(seconds: 1), () async {
+      updateStatus();
+    });
+  }
+
+  @override
+  void dispose() {
+    _updateTimer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isIncomingOnly = bind.isIncomingOnly();
+    startServiceWidget() => Offstage(
+          offstage: !_svcStopped.value,
+          child: InkWell(
+                  onTap: () async {
+                    await start_service(true);
+                  },
+                  child: Text(translate("Start service"),
+                      style: TextStyle(
+                          decoration: TextDecoration.underline, fontSize: em)))
+              .marginOnly(left: em),
+        );
+
+    setupServerWidget() => Flexible(
+          child: Offstage(
+            offstage: !(!_svcStopped.value &&
+                stateGlobal.svcStatus.value == SvcStatus.ready &&
+                _svcIsUsingPublicServer.value),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Text(', ', style: TextStyle(fontSize: em)),
+                Flexible(
+                  child: InkWell(
+                    onTap: onUsePublicServerGuide,
+                    child: Row(
+                      children: [
+                        Flexible(
+                          child: Text(
+                            translate('setup_server_tip'),
+                            style: TextStyle(
+                                decoration: TextDecoration.underline,
+                                fontSize: em),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                )
+              ],
+            ),
+          ),
+        );
+
+    basicWidget() => Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Container(
+              height: 8,
+              width: 8,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(4),
+                color: _svcStopped.value ||
+                        stateGlobal.svcStatus.value == SvcStatus.connecting
+                    ? kColorWarn
+                    : (stateGlobal.svcStatus.value == SvcStatus.ready
+                        ? Color.fromARGB(255, 50, 190, 166)
+                        : Color.fromARGB(255, 224, 79, 95)),
+              ),
+            ).marginSymmetric(horizontal: em),
+            Container(
+              width: isIncomingOnly ? 226 : null,
+              child: _buildConnStatusMsg(),
+            ),
+            // stop
+            if (!isIncomingOnly) startServiceWidget(),
+            // ready && public
+            // No need to show the guide if is custom client.
+            if (!isIncomingOnly) setupServerWidget(),
+          ],
+        );
+
+    return Container(
+      height: height,
+      child: Obx(() => isIncomingOnly
+          ? Column(
+              children: [
+                basicWidget(),
+                Align(
+                        child: startServiceWidget(),
+                        alignment: Alignment.centerLeft)
+                    .marginOnly(top: 2.0, left: 22.0),
+              ],
+            )
+          : basicWidget()),
+    ).paddingOnly(right: isIncomingOnly ? 8 : 0);
+  }
+
+  _buildConnStatusMsg() {
+    widget.onSvcStatusChanged?.call();
+    return Text(
+      _svcStopped.value
+          ? translate("Service is not running")
+          : stateGlobal.svcStatus.value == SvcStatus.connecting
+              ? translate("connecting_status")
+              : stateGlobal.svcStatus.value == SvcStatus.notReady
+                  ? translate("not_ready_status")
+                  : translate('Ready'),
+      style: TextStyle(fontSize: em),
+    );
+  }
+
+  updateStatus() async {
+    final status =
+        jsonDecode(await bind.mainGetConnectStatus()) as Map<String, dynamic>;
+    final statusNum = status['status_num'] as int;
+    if (statusNum == 0) {
+      stateGlobal.svcStatus.value = SvcStatus.connecting;
+    } else if (statusNum == -1) {
+      stateGlobal.svcStatus.value = SvcStatus.notReady;
+    } else if (statusNum == 1) {
+      stateGlobal.svcStatus.value = SvcStatus.ready;
+    } else {
+      stateGlobal.svcStatus.value = SvcStatus.notReady;
+    }
+    _svcIsUsingPublicServer.value = await bind.mainIsUsingPublicServer();
+    try {
+      stateGlobal.videoConnCount.value = status['video_conn_count'] as int;
+    } catch (_) {}
+  }
+}
+
+/// Connection page for connecting to a remote peer.
+class ConnectionPage extends StatefulWidget {
+  const ConnectionPage({Key? key}) : super(key: key);
+
+  @override
+  State<ConnectionPage> createState() => _ConnectionPageState();
+}
+
+/// State for the connection page.
+class _ConnectionPageState extends State<ConnectionPage>
+    with SingleTickerProviderStateMixin, WindowListener {
+  /// Controller for the id input bar.
+  final _idController = IDTextEditingController();
+
+  final RxBool _idInputFocused = false.obs;
+  final FocusNode _idFocusNode = FocusNode();
+  final TextEditingController _idEditingController = TextEditingController();
+
+  String selectedConnectionType = 'Connect';
+
+  bool isWindowMinimized = false;
+
+  final AllPeersLoader _allPeersLoader = AllPeersLoader();
+
+  // https://github.com/flutter/flutter/issues/157244
+  Iterable<Peer> _autocompleteOpts = [];
+
+  final _menuOpen = false.obs;
+
+  @override
+  void initState() {
+    super.initState();
+    _allPeersLoader.init(setState);
+    _idFocusNode.addListener(onFocusChanged);
+    if (_idController.text.isEmpty) {
+      WidgetsBinding.instance.addPostFrameCallback((_) async {
+        final lastRemoteId = await bind.mainGetLastRemoteId();
+        if (lastRemoteId != _idController.id) {
+          setState(() {
+            _idController.id = lastRemoteId;
+          });
+        }
+      });
+    }
+    Get.put<TextEditingController>(_idEditingController);
+    Get.put<IDTextEditingController>(_idController);
+    windowManager.addListener(this);
+  }
+
+  @override
+  void dispose() {
+    _idController.dispose();
+    windowManager.removeListener(this);
+    _allPeersLoader.clear();
+    _idFocusNode.removeListener(onFocusChanged);
+    _idFocusNode.dispose();
+    _idEditingController.dispose();
+    if (Get.isRegistered<IDTextEditingController>()) {
+      Get.delete<IDTextEditingController>();
+    }
+    if (Get.isRegistered<TextEditingController>()) {
+      Get.delete<TextEditingController>();
+    }
+    super.dispose();
+  }
+
+  @override
+  void onWindowEvent(String eventName) {
+    super.onWindowEvent(eventName);
+    if (eventName == 'minimize') {
+      isWindowMinimized = true;
+    } else if (eventName == 'maximize' || eventName == 'restore') {
+      if (isWindowMinimized && isWindows) {
+        // windows can't update when minimized.
+        Get.forceAppUpdate();
+      }
+      isWindowMinimized = false;
+    }
+  }
+
+  @override
+  void onWindowEnterFullScreen() {
+    // Remove edge border by setting the value to zero.
+    stateGlobal.resizeEdgeSize.value = 0;
+  }
+
+  @override
+  void onWindowLeaveFullScreen() {
+    // Restore edge border to default edge size.
+    stateGlobal.resizeEdgeSize.value = stateGlobal.isMaximized.isTrue
+        ? kMaximizeEdgeSize
+        : windowResizeEdgeSize;
+  }
+
+  @override
+  void onWindowClose() {
+    super.onWindowClose();
+    bind.mainOnMainWindowClose();
+  }
+
+  void onFocusChanged() {
+    _idInputFocused.value = _idFocusNode.hasFocus;
+    if (_idFocusNode.hasFocus) {
+      if (_allPeersLoader.needLoad) {
+        _allPeersLoader.getAllPeers();
+      }
+
+      final textLength = _idEditingController.value.text.length;
+      // Select all to facilitate removing text, just following the behavior of address input of chrome.
+      _idEditingController.selection =
+          TextSelection(baseOffset: 0, extentOffset: textLength);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isOutgoingOnly = bind.isOutgoingOnly();
+    return Column(
+      children: [
+        Expanded(
+            child: Column(
+          children: [
+            Row(
+              children: [
+                Flexible(child: _buildRemoteIDTextField(context)),
+              ],
+            ).marginOnly(top: 22),
+            SizedBox(height: 12),
+            Divider().paddingOnly(right: 12),
+            Expanded(child: PeerTabPage()),
+          ],
+        ).paddingOnly(left: 12.0)),
+        if (!isOutgoingOnly) const Divider(height: 1),
+        if (!isOutgoingOnly) OnlineStatusWidget()
+      ],
+    );
+  }
+
+  /// Callback for the connect button.
+  /// Connects to the selected peer.
+  void onConnect(
+      {bool isFileTransfer = false,
+      bool isViewCamera = false,
+      bool isTerminal = false}) {
+    var id = _idController.id;
+    connect(context, id,
+        isFileTransfer: isFileTransfer,
+        isViewCamera: isViewCamera,
+        isTerminal: isTerminal);
+  }
+
+  /// UI for the remote ID TextField.
+  /// Search for a peer.
+  Widget _buildRemoteIDTextField(BuildContext context) {
+    var w = Container(
+      width: 320 + 20 * 2,
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 22),
+      decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(Radius.circular(13)),
+          border: Border.all(color: Theme.of(context).colorScheme.background)),
+      child: Ink(
+        child: Column(
+          children: [
+            getConnectionPageTitle(context, false).marginOnly(bottom: 15),
+            Row(
+              children: [
+                Expanded(
+                    child: RawAutocomplete<Peer>(
+                  optionsBuilder: (TextEditingValue textEditingValue) {
+                    if (textEditingValue.text == '') {
+                      _autocompleteOpts = const Iterable<Peer>.empty();
+                    } else if (_allPeersLoader.peers.isEmpty &&
+                        !_allPeersLoader.isPeersLoaded) {
+                      Peer emptyPeer = Peer(
+                        id: '',
+                        username: '',
+                        hostname: '',
+                        alias: '',
+                        platform: '',
+                        tags: [],
+                        hash: '',
+                        password: '',
+                        forceAlwaysRelay: false,
+                        rdpPort: '',
+                        rdpUsername: '',
+                        loginName: '',
+                        device_group_name: '',
+                        note: '',
+                      );
+                      _autocompleteOpts = [emptyPeer];
+                    } else {
+                      String textWithoutSpaces =
+                          textEditingValue.text.replaceAll(" ", "");
+                      if (int.tryParse(textWithoutSpaces) != null) {
+                        textEditingValue = TextEditingValue(
+                          text: textWithoutSpaces,
+                          selection: textEditingValue.selection,
+                        );
+                      }
+                      String textToFind = textEditingValue.text.toLowerCase();
+                      _autocompleteOpts = _allPeersLoader.peers
+                          .where((peer) =>
+                              peer.id.toLowerCase().contains(textToFind) ||
+                              peer.username
+                                  .toLowerCase()
+                                  .contains(textToFind) ||
+                              peer.hostname
+                                  .toLowerCase()
+                                  .contains(textToFind) ||
+                              peer.alias.toLowerCase().contains(textToFind))
+                          .toList();
+                    }
+                    return _autocompleteOpts;
+                  },
+                  focusNode: _idFocusNode,
+                  textEditingController: _idEditingController,
+                  fieldViewBuilder: (
+                    BuildContext context,
+                    TextEditingController fieldTextEditingController,
+                    FocusNode fieldFocusNode,
+                    VoidCallback onFieldSubmitted,
+                  ) {
+                    updateTextAndPreserveSelection(
+                        fieldTextEditingController, _idController.text);
+                    return Obx(() => TextField(
+                          autocorrect: false,
+                          enableSuggestions: false,
+                          keyboardType: TextInputType.visiblePassword,
+                          focusNode: fieldFocusNode,
+                          style: const TextStyle(
+                            fontFamily: 'WorkSans',
+                            fontSize: 22,
+                            height: 1.4,
+                          ),
+                          maxLines: 1,
+                          cursorColor:
+                              Theme.of(context).textTheme.titleLarge?.color,
+                          decoration: InputDecoration(
+                              filled: false,
+                              counterText: '',
+                              hintText: _idInputFocused.value
+                                  ? null
+                                  : translate('Enter Remote ID'),
+                              contentPadding: const EdgeInsets.symmetric(
+                                  horizontal: 15, vertical: 13)),
+                          controller: fieldTextEditingController,
+                          inputFormatters: [IDTextInputFormatter()],
+                          onChanged: (v) {
+                            _idController.id = v;
+                          },
+                          onSubmitted: (_) {
+                            onConnect();
+                          },
+                        ).workaroundFreezeLinuxMint());
+                  },
+                  onSelected: (option) {
+                    setState(() {
+                      _idController.id = option.id;
+                      FocusScope.of(context).unfocus();
+                    });
+                  },
+                  optionsViewBuilder: (BuildContext context,
+                      AutocompleteOnSelected<Peer> onSelected,
+                      Iterable<Peer> options) {
+                    options = _autocompleteOpts;
+                    double maxHeight = options.length * 50;
+                    if (options.length == 1) {
+                      maxHeight = 52;
+                    } else if (options.length == 3) {
+                      maxHeight = 146;
+                    } else if (options.length == 4) {
+                      maxHeight = 193;
+                    }
+                    maxHeight = maxHeight.clamp(0, 200);
+
+                    return Align(
+                      alignment: Alignment.topLeft,
+                      child: Container(
+                          decoration: BoxDecoration(
+                            boxShadow: [
+                              BoxShadow(
+                                color: Colors.black.withOpacity(0.3),
+                                blurRadius: 5,
+                                spreadRadius: 1,
+                              ),
+                            ],
+                          ),
+                          child: ClipRRect(
+                              borderRadius: BorderRadius.circular(5),
+                              child: Material(
+                                elevation: 4,
+                                child: ConstrainedBox(
+                                  constraints: BoxConstraints(
+                                    maxHeight: maxHeight,
+                                    maxWidth: 319,
+                                  ),
+                                  child: _allPeersLoader.peers.isEmpty &&
+                                          !_allPeersLoader.isPeersLoaded
+                                      ? Container(
+                                          height: 80,
+                                          child: Center(
+                                            child: CircularProgressIndicator(
+                                              strokeWidth: 2,
+                                            ),
+                                          ))
+                                      : Padding(
+                                          padding:
+                                              const EdgeInsets.only(top: 5),
+                                          child: ListView(
+                                            children: options
+                                                .map((peer) =>
+                                                    AutocompletePeerTile(
+                                                        onSelect: () =>
+                                                            onSelected(peer),
+                                                        peer: peer))
+                                                .toList(),
+                                          ),
+                                        ),
+                                ),
+                              ))),
+                    );
+                  },
+                )),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 13.0),
+              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
+                SizedBox(
+                  height: 28.0,
+                  child: ElevatedButton(
+                    onPressed: () {
+                      onConnect();
+                    },
+                    child: Text(translate("Connect")),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                Container(
+                  height: 28.0,
+                  width: 28.0,
+                  decoration: BoxDecoration(
+                    border: Border.all(color: Theme.of(context).dividerColor),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Center(
+                    child: StatefulBuilder(
+                      builder: (context, setState) {
+                        var offset = Offset(0, 0);
+                        return Obx(() => InkWell(
+                              child: _menuOpen.value
+                                  ? Transform.rotate(
+                                      angle: pi,
+                                      child: Icon(IconFont.more, size: 14),
+                                    )
+                                  : Icon(IconFont.more, size: 14),
+                              onTapDown: (e) {
+                                offset = e.globalPosition;
+                              },
+                              onTap: () async {
+                                _menuOpen.value = true;
+                                final x = offset.dx;
+                                final y = offset.dy;
+                                await mod_menu
+                                    .showMenu(
+                                  context: context,
+                                  position: RelativeRect.fromLTRB(x, y, x, y),
+                                  items: [
+                                    (
+                                      'Transfer file',
+                                      () => onConnect(isFileTransfer: true)
+                                    ),
+                                    (
+                                      'View camera',
+                                      () => onConnect(isViewCamera: true)
+                                    ),
+                                    (
+                                      '${translate('Terminal')} (beta)',
+                                      () => onConnect(isTerminal: true)
+                                    ),
+                                  ]
+                                      .map((e) => MenuEntryButton<String>(
+                                            childBuilder: (TextStyle? style) =>
+                                                Text(
+                                              translate(e.$1),
+                                              style: style,
+                                            ),
+                                            proc: () => e.$2(),
+                                            padding: EdgeInsets.symmetric(
+                                                horizontal:
+                                                    kDesktopMenuPadding.left),
+                                            dismissOnClicked: true,
+                                          ))
+                                      .map((e) => e.build(
+                                          context,
+                                          const MenuConfig(
+                                              commonColor: CustomPopupMenuTheme
+                                                  .commonColor,
+                                              height:
+                                                  CustomPopupMenuTheme.height,
+                                              dividerHeight:
+                                                  CustomPopupMenuTheme
+                                                      .dividerHeight)))
+                                      .expand((i) => i)
+                                      .toList(),
+                                  elevation: 8,
+                                )
+                                    .then((_) {
+                                  _menuOpen.value = false;
+                                });
+                              },
+                            ));
+                      },
+                    ),
+                  ),
+                ),
+              ]),
+            ),
+          ],
+        ),
+      ),
+    );
+    return Container(
+        constraints: const BoxConstraints(maxWidth: 600), child: w);
+  }
+}

flutter/lib/desktop/pages/desktop_tab_page.dart

@@ -0,0 +1,119 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/desktop/pages/desktop_home_page.dart';
+import 'package:flutter_hbb/desktop/pages/desktop_setting_page.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:get/get.dart';
+import 'package:window_manager/window_manager.dart';
+// import 'package:flutter/services.dart';
+
+import '../../common/shared_state.dart';
+
+class DesktopTabPage extends StatefulWidget {
+  const DesktopTabPage({Key? key}) : super(key: key);
+
+  @override
+  State<DesktopTabPage> createState() => _DesktopTabPageState();
+
+  static void onAddSetting(
+      {SettingsTabKey initialPage = SettingsTabKey.general}) {
+    try {
+      DesktopTabController tabController = Get.find<DesktopTabController>();
+      tabController.add(TabInfo(
+          key: kTabLabelSettingPage,
+          label: kTabLabelSettingPage,
+          selectedIcon: Icons.build_sharp,
+          unselectedIcon: Icons.build_outlined,
+          page: DesktopSettingPage(
+            key: const ValueKey(kTabLabelSettingPage),
+            initialTabkey: initialPage,
+          )));
+    } catch (e) {
+      debugPrintStack(label: '$e');
+    }
+  }
+}
+
+class _DesktopTabPageState extends State<DesktopTabPage> {
+  final tabController = DesktopTabController(tabType: DesktopTabType.main);
+
+  _DesktopTabPageState() {
+    RemoteCountState.init();
+    Get.put<DesktopTabController>(tabController);
+    tabController.add(TabInfo(
+        key: kTabLabelHomePage,
+        label: kTabLabelHomePage,
+        selectedIcon: Icons.home_sharp,
+        unselectedIcon: Icons.home_outlined,
+        closable: false,
+        page: DesktopHomePage(
+          key: const ValueKey(kTabLabelHomePage),
+        )));
+    if (bind.isIncomingOnly()) {
+      tabController.onSelected = (key) {
+        if (key == kTabLabelHomePage) {
+          windowManager.setSize(getIncomingOnlyHomeSize());
+          setResizable(false);
+        } else {
+          windowManager.setSize(getIncomingOnlySettingsSize());
+          setResizable(true);
+        }
+      };
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    // HardwareKeyboard.instance.addHandler(_handleKeyEvent);
+  }
+
+  /*
+  bool _handleKeyEvent(KeyEvent event) {
+    if (!mouseIn && event is KeyDownEvent) {
+      print('key down: ${event.logicalKey}');
+      shouldBeBlocked(_block, canBeBlocked);
+    }
+    return false; // allow it to propagate
+  }
+  */
+
+  @override
+  void dispose() {
+    // HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
+    Get.delete<DesktopTabController>();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tabWidget = Container(
+        child: Scaffold(
+            backgroundColor: Theme.of(context).colorScheme.background,
+            body: DesktopTab(
+              controller: tabController,
+              tail: Offstage(
+                offstage: bind.isIncomingOnly() || bind.isDisableSettings(),
+                child: ActionIcon(
+                  message: 'Settings',
+                  icon: IconFont.menu,
+                  onTap: DesktopTabPage.onAddSetting,
+                  isClose: false,
+                ),
+              ),
+            )));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : Obx(
+            () => DragToResizeArea(
+              resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+              enableResizeEdges: windowManagerEnableResizeEdges,
+              child: tabWidget,
+            ),
+          );
+  }
+}

flutter/lib/desktop/pages/file_manager_tab_page.dart

@@ -0,0 +1,177 @@
+import 'dart:convert';
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/common/widgets/dialog.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:flutter_hbb/desktop/pages/file_manager_page.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/utils/multi_window_manager.dart';
+import 'package:get/get.dart';
+
+import '../../models/platform_model.dart';
+
+/// File Transfer for multi tabs
+class FileManagerTabPage extends StatefulWidget {
+  final Map<String, dynamic> params;
+
+  const FileManagerTabPage({Key? key, required this.params}) : super(key: key);
+
+  @override
+  State<FileManagerTabPage> createState() => _FileManagerTabPageState(params);
+}
+
+class _FileManagerTabPageState extends State<FileManagerTabPage> {
+  DesktopTabController get tabController => Get.find<DesktopTabController>();
+
+  static const IconData selectedIcon = Icons.file_copy_sharp;
+  static const IconData unselectedIcon = Icons.file_copy_outlined;
+
+  _FileManagerTabPageState(Map<String, dynamic> params) {
+    Get.put(DesktopTabController(tabType: DesktopTabType.fileTransfer));
+    tabController.onSelected = (id) {
+      WindowController.fromWindowId(windowId())
+          .setTitle(getWindowNameWithId(id));
+    };
+    tabController.onRemoved = (_, id) => onRemoveId(id);
+    tabController.add(TabInfo(
+        key: params['id'],
+        label: params['id'],
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        onTabCloseButton: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: params['id'],
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(params['id']);
+        },
+        page: FileManagerPage(
+          key: ValueKey(params['id']),
+          id: params['id'],
+          password: params['password'],
+          isSharedPassword: params['isSharedPassword'],
+          tabController: tabController,
+          forceRelay: params['forceRelay'],
+          connToken: params['connToken'],
+        )));
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
+      debugPrint(
+          "[FileTransfer] call ${call.method} with args ${call.arguments} from window $fromWindowId to ${windowId()}");
+      // for simplify, just replace connectionId
+      if (call.method == kWindowEventNewFileTransfer) {
+        final args = jsonDecode(call.arguments);
+        final id = args['id'];
+        windowOnTop(windowId());
+        tabController.add(TabInfo(
+            key: id,
+            label: id,
+            selectedIcon: selectedIcon,
+            unselectedIcon: unselectedIcon,
+            onTabCloseButton: () async {
+              if (await desktopTryShowTabAuditDialogCloseCancelled(
+                id: id,
+                tabController: tabController,
+              )) {
+                return;
+              }
+              tabController.closeBy(id);
+            },
+            page: FileManagerPage(
+              key: ValueKey(id),
+              id: id,
+              password: args['password'],
+              isSharedPassword: args['isSharedPassword'],
+              tabController: tabController,
+              forceRelay: args['forceRelay'],
+              connToken: args['connToken'],
+            )));
+      } else if (call.method == "onDestroy") {
+        tabController.clear();
+      } else if (call.method == kWindowActionRebuild) {
+        reloadCurrentWindow();
+      }
+    });
+    Future.delayed(Duration.zero, () {
+      restoreWindowPosition(WindowType.FileTransfer, windowId: windowId());
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final child = Scaffold(
+        backgroundColor: Theme.of(context).cardColor,
+        body: DesktopTab(
+          controller: tabController,
+          onWindowCloseButton: handleWindowCloseButton,
+          tail: const AddButton(),
+          selectedBorderColor: MyTheme.accent,
+          labelGetter: DesktopTab.tablabelGetter,
+        ));
+    final tabWidget = isLinux
+        ? buildVirtualWindowFrame(context, child)
+        : workaroundWindowBorder(
+            context,
+            Container(
+              decoration: BoxDecoration(
+                  border: Border.all(color: MyTheme.color(context).border!)),
+              child: child,
+            ));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : SubWindowDragToResizeArea(
+            child: tabWidget,
+            resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+            enableResizeEdges: subWindowManagerEnableResizeEdges,
+            windowId: stateGlobal.windowId,
+          );
+  }
+
+  void onRemoveId(String id) {
+    if (tabController.state.value.tabs.isEmpty) {
+      WindowController.fromWindowId(windowId()).close();
+    }
+  }
+
+  int windowId() {
+    return widget.params["windowId"];
+  }
+
+  Future<bool> handleWindowCloseButton() async {
+    final connLength = tabController.state.value.tabs.length;
+    if (connLength == 1) {
+      if (await desktopTryShowTabAuditDialogCloseCancelled(
+        id: tabController.state.value.tabs[0].key,
+        tabController: tabController,
+      )) {
+        return false;
+      }
+    }
+    if (connLength <= 1) {
+      tabController.clear();
+      return true;
+    } else {
+      final bool res;
+      if (!option2bool(kOptionEnableConfirmClosingTabs,
+          bind.mainGetLocalOption(key: kOptionEnableConfirmClosingTabs))) {
+        res = true;
+      } else {
+        res = await closeConfirmDialog();
+      }
+      if (res) {
+        tabController.clear();
+      }
+      return res;
+    }
+  }
+}

flutter/lib/desktop/pages/install_page.dart

@@ -0,0 +1,274 @@
+import 'dart:convert';
+
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:get/get.dart';
+import 'package:path/path.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+import 'package:window_manager/window_manager.dart';
+
+class InstallPage extends StatefulWidget {
+  const InstallPage({Key? key}) : super(key: key);
+
+  @override
+  State<InstallPage> createState() => _InstallPageState();
+}
+
+class _InstallPageState extends State<InstallPage> {
+  final tabController = DesktopTabController(tabType: DesktopTabType.main);
+
+  _InstallPageState() {
+    Get.put<DesktopTabController>(tabController);
+    const label = "install";
+    tabController.add(TabInfo(
+        key: label,
+        label: label,
+        closable: false,
+        page: _InstallPageBody(
+          key: const ValueKey(label),
+        )));
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    Get.delete<DesktopTabController>();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DragToResizeArea(
+      resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+      enableResizeEdges: windowManagerEnableResizeEdges,
+      child: Container(
+        child: Scaffold(
+            backgroundColor: Theme.of(context).colorScheme.background,
+            body: DesktopTab(controller: tabController)),
+      ),
+    );
+  }
+}
+
+class _InstallPageBody extends StatefulWidget {
+  const _InstallPageBody({Key? key}) : super(key: key);
+
+  @override
+  State<_InstallPageBody> createState() => _InstallPageBodyState();
+}
+
+class _InstallPageBodyState extends State<_InstallPageBody>
+    with WindowListener {
+  late final TextEditingController controller;
+  final RxBool startmenu = true.obs;
+  final RxBool desktopicon = true.obs;
+  final RxBool printer = false.obs;
+  final RxBool showProgress = false.obs;
+  final RxBool btnEnabled = true.obs;
+
+  // todo move to theme.
+  final buttonStyle = OutlinedButton.styleFrom(
+    textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
+    padding: EdgeInsets.symmetric(vertical: 15, horizontal: 12),
+  );
+
+  _InstallPageBodyState() {
+    controller = TextEditingController(text: bind.installInstallPath());
+    final installOptions = jsonDecode(bind.installInstallOptions());
+    startmenu.value = installOptions['STARTMENUSHORTCUTS'] != '0';
+    desktopicon.value = installOptions['DESKTOPSHORTCUTS'] != '0';
+    printer.value = installOptions['PRINTER'] == '1';
+  }
+
+  @override
+  void initState() {
+    windowManager.addListener(this);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    windowManager.removeListener(this);
+    super.dispose();
+  }
+
+  @override
+  void onWindowClose() {
+    gFFI.close();
+    super.onWindowClose();
+    windowManager.setPreventClose(false);
+    windowManager.close();
+  }
+
+  InkWell Option(RxBool option, {String label = ''}) {
+    return InkWell(
+      // todo mouseCursor: "SystemMouseCursors.forbidden" or no cursor on btnEnabled == false
+      borderRadius: BorderRadius.circular(6),
+      onTap: () => btnEnabled.value ? option.value = !option.value : null,
+      child: Row(
+        children: [
+          Obx(
+            () => Checkbox(
+              visualDensity: VisualDensity(horizontal: -4, vertical: -4),
+              value: option.value,
+              onChanged: (v) =>
+                  btnEnabled.value ? option.value = !option.value : null,
+            ).marginOnly(right: 8),
+          ),
+          Expanded(
+            child: Text(translate(label)),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double em = 13;
+    final isDarkTheme = MyTheme.currentThemeMode() == ThemeMode.dark;
+    return Scaffold(
+        backgroundColor: null,
+        body: SingleChildScrollView(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(translate('Installation'),
+                  style: Theme.of(context).textTheme.headlineMedium),
+              Row(
+                children: [
+                  Text('${translate('Installation Path')}:')
+                      .marginOnly(right: 10),
+                  Expanded(
+                    child: TextField(
+                      controller: controller,
+                      readOnly: true,
+                      decoration: InputDecoration(
+                        contentPadding: EdgeInsets.all(0.75 * em),
+                      ),
+                    ).workaroundFreezeLinuxMint().marginOnly(right: 10),
+                  ),
+                  Obx(
+                    () => OutlinedButton.icon(
+                      icon: Icon(Icons.folder_outlined, size: 16),
+                      onPressed: btnEnabled.value ? selectInstallPath : null,
+                      style: buttonStyle,
+                      label: Text(translate('Change Path')),
+                    ),
+                  )
+                ],
+              ).marginSymmetric(vertical: 2 * em),
+              Option(startmenu, label: 'Create start menu shortcuts')
+                  .marginOnly(bottom: 7),
+              Option(desktopicon, label: 'Create desktop icon')
+                  .marginOnly(bottom: 7),
+              Option(printer, label: 'Install {$appName} Printer'),
+              Container(
+                  padding: EdgeInsets.all(12),
+                  decoration: BoxDecoration(
+                    color: isDarkTheme
+                        ? Color.fromARGB(135, 87, 87, 90)
+                        : Colors.grey[100],
+                    borderRadius: BorderRadius.circular(8),
+                    border: Border.all(color: Colors.grey),
+                  ),
+                  child: Row(
+                    children: [
+                      Icon(Icons.info_outline_rounded, size: 32)
+                          .marginOnly(right: 16),
+                      Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(translate('agreement_tip'))
+                              .marginOnly(bottom: em),
+                          InkWell(
+                            hoverColor: Colors.transparent,
+                            onTap: () => launchUrlString(
+                                'https://rustdesk.com/privacy.html'),
+                            child: Tooltip(
+                              message: 'https://rustdesk.com/privacy.html',
+                              child: Row(children: [
+                                Icon(Icons.launch_outlined, size: 16)
+                                    .marginOnly(right: 5),
+                                Text(
+                                  translate('End-user license agreement'),
+                                  style: const TextStyle(
+                                      decoration: TextDecoration.underline),
+                                )
+                              ]),
+                            ),
+                          ),
+                        ],
+                      )
+                    ],
+                  )).marginSymmetric(vertical: 2 * em),
+              Row(
+                children: [
+                  Expanded(
+                    // NOT use Offstage to wrap LinearProgressIndicator
+                    child: Obx(() => showProgress.value
+                        ? LinearProgressIndicator().marginOnly(right: 10)
+                        : Offstage()),
+                  ),
+                  Obx(
+                    () => OutlinedButton.icon(
+                      icon: Icon(Icons.close_rounded, size: 16),
+                      label: Text(translate('Cancel')),
+                      onPressed:
+                          btnEnabled.value ? () => windowManager.close() : null,
+                      style: buttonStyle,
+                    ).marginOnly(right: 10),
+                  ),
+                  Obx(
+                    () => ElevatedButton.icon(
+                      icon: Icon(Icons.done_rounded, size: 16),
+                      label: Text(translate('Accept and Install')),
+                      onPressed: btnEnabled.value ? install : null,
+                      style: buttonStyle,
+                    ),
+                  ),
+                  Offstage(
+                    offstage: bind.installShowRunWithoutInstall(),
+                    child: Obx(
+                      () => OutlinedButton.icon(
+                        icon: Icon(Icons.screen_share_outlined, size: 16),
+                        label: Text(translate('Run without install')),
+                        onPressed: btnEnabled.value
+                            ? () => bind.installRunWithoutInstall()
+                            : null,
+                        style: buttonStyle,
+                      ).marginOnly(left: 10),
+                    ),
+                  ),
+                ],
+              )
+            ],
+          ).paddingSymmetric(horizontal: 4 * em, vertical: 3 * em),
+        ));
+  }
+
+  void install() {
+    do_install() {
+      btnEnabled.value = false;
+      showProgress.value = true;
+      String args = '';
+      if (startmenu.value) args += ' startmenu';
+      if (desktopicon.value) args += ' desktopicon';
+      if (printer.value) args += ' printer';
+      bind.installInstallMe(options: args, path: controller.text);
+    }
+
+    do_install();
+  }
+
+  void selectInstallPath() async {
+    String? install_path = await FilePicker.platform
+        .getDirectoryPath(initialDirectory: controller.text);
+    if (install_path != null) {
+      controller.text = join(install_path, await bind.mainGetAppName());
+    }
+  }
+}

flutter/lib/desktop/pages/port_forward_page.dart

@@ -0,0 +1,357 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/models/model.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:get/get.dart';
+
+const double _kColumn1Width = 30;
+const double _kColumn4Width = 100;
+const double _kRowHeight = 60;
+const double _kTextLeftMargin = 20;
+
+class _PortForward {
+  int localPort;
+  String remoteHost;
+  int remotePort;
+
+  _PortForward.fromJson(List<dynamic> json)
+      : localPort = json[0] as int,
+        remoteHost = json[1] as String,
+        remotePort = json[2] as int;
+}
+
+class PortForwardPage extends StatefulWidget {
+  PortForwardPage({
+    Key? key,
+    required this.id,
+    required this.password,
+    required this.tabController,
+    required this.isRDP,
+    required this.isSharedPassword,
+    this.forceRelay,
+    this.connToken,
+  }) : super(key: key);
+  final String id;
+  final String? password;
+  final DesktopTabController tabController;
+  final bool isRDP;
+  final bool? forceRelay;
+  final bool? isSharedPassword;
+  final String? connToken;
+  final SimpleWrapper<State<PortForwardPage>?> _lastState = SimpleWrapper(null);
+
+  FFI get ffi => (_lastState.value! as _PortForwardPageState)._ffi;
+
+  @override
+  State<PortForwardPage> createState() {
+    final state = _PortForwardPageState();
+    _lastState.value = state;
+    return state;
+  }
+}
+
+class _PortForwardPageState extends State<PortForwardPage>
+    with AutomaticKeepAliveClientMixin {
+  final TextEditingController localPortController = TextEditingController();
+  final TextEditingController remoteHostController = TextEditingController();
+  final TextEditingController remotePortController = TextEditingController();
+  RxList<_PortForward> pfs = RxList.empty(growable: true);
+  late FFI _ffi;
+
+  @override
+  void initState() {
+    super.initState();
+    _ffi = FFI(null);
+    _ffi.start(widget.id,
+        isPortForward: true,
+        password: widget.password,
+        isSharedPassword: widget.isSharedPassword,
+        forceRelay: widget.forceRelay,
+        connToken: widget.connToken,
+        isRdp: widget.isRDP);
+    Get.put<FFI>(_ffi, tag: 'pf_${widget.id}');
+    debugPrint("Port forward page init success with id ${widget.id}");
+    // Call onSelected in post frame callback, since we cannot guarantee that the callback will not call setState.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      widget.tabController.onSelected?.call(widget.id);
+    });
+  }
+
+  @override
+  void dispose() {
+    _ffi.close();
+    _ffi.dialogManager.dismissAll();
+    Get.delete<FFI>(tag: 'pf_${widget.id}');
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return Scaffold(
+      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+      body: FutureBuilder(future: () async {
+        if (!widget.isRDP) {
+          refreshTunnelConfig();
+        }
+      }(), builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.done) {
+          return Container(
+            decoration: BoxDecoration(
+                border: Border.all(
+                    width: 20,
+                    color: Theme.of(context).scaffoldBackgroundColor)),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                buildPrompt(context),
+                Flexible(
+                  child: Container(
+                    decoration: BoxDecoration(
+                        color: Theme.of(context).colorScheme.background,
+                        border: Border.all(width: 1, color: MyTheme.border)),
+                    child:
+                        widget.isRDP ? buildRdp(context) : buildTunnel(context),
+                  ),
+                ),
+              ],
+            ),
+          );
+        }
+        return const Offstage();
+      }),
+    );
+  }
+
+  buildPrompt(BuildContext context) {
+    return Obx(() => Offstage(
+          offstage: pfs.isEmpty && !widget.isRDP,
+          child: Container(
+              height: 45,
+              color: const Color(0xFF007F00),
+              child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      translate('Listening ...'),
+                      style: const TextStyle(fontSize: 16, color: Colors.white),
+                    ),
+                    Text(
+                      translate('not_close_tcp_tip'),
+                      style: const TextStyle(
+                          fontSize: 10, color: Color(0xFFDDDDDD), height: 1.2),
+                    )
+                  ])).marginOnly(bottom: 8),
+        ));
+  }
+
+  buildTunnel(BuildContext context) {
+    text(String label) => Expanded(
+        child: Text(translate(label)).marginOnly(left: _kTextLeftMargin));
+
+    return Theme(
+      data: Theme.of(context).copyWith(
+        colorScheme: Theme.of(context).colorScheme,
+      ),
+      child: Obx(() => ListView.builder(
+          controller: ScrollController(),
+          itemCount: pfs.length + 2,
+          itemBuilder: ((context, index) {
+            if (index == 0) {
+              return Container(
+                height: 25,
+                color: Theme.of(context).scaffoldBackgroundColor,
+                child: Row(children: [
+                  text('Local Port'),
+                  const SizedBox(width: _kColumn1Width),
+                  text('Remote Host'),
+                  text('Remote Port'),
+                  SizedBox(
+                      width: _kColumn4Width, child: Text(translate('Action')))
+                ]),
+              );
+            } else if (index == 1) {
+              return buildTunnelAddRow(context);
+            } else {
+              return buildTunnelDataRow(context, pfs[index - 2], index - 2);
+            }
+          }))),
+    );
+  }
+
+  buildTunnelAddRow(BuildContext context) {
+    var portInputFormatter = [
+      FilteringTextInputFormatter.allow(RegExp(
+          r'^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$'))
+    ];
+
+    return Container(
+      height: _kRowHeight,
+      decoration:
+          BoxDecoration(color: Theme.of(context).colorScheme.background),
+      child: Row(children: [
+        buildTunnelInputCell(context,
+            controller: localPortController,
+            inputFormatters: portInputFormatter),
+        const SizedBox(
+            width: _kColumn1Width, child: Icon(Icons.arrow_forward_sharp)),
+        buildTunnelInputCell(context,
+            controller: remoteHostController, hint: 'localhost'),
+        buildTunnelInputCell(context,
+            controller: remotePortController,
+            inputFormatters: portInputFormatter),
+        ElevatedButton(
+          onPressed: () async {
+            int? localPort = int.tryParse(localPortController.text);
+            int? remotePort = int.tryParse(remotePortController.text);
+            if (localPort != null &&
+                remotePort != null &&
+                (remoteHostController.text.isEmpty ||
+                    remoteHostController.text.trim().isNotEmpty)) {
+              await bind.sessionAddPortForward(
+                  sessionId: _ffi.sessionId,
+                  localPort: localPort,
+                  remoteHost: remoteHostController.text.trim().isEmpty
+                      ? 'localhost'
+                      : remoteHostController.text.trim(),
+                  remotePort: remotePort);
+              localPortController.clear();
+              remoteHostController.clear();
+              remotePortController.clear();
+              refreshTunnelConfig();
+            }
+          },
+          child: Text(
+            translate('Add'),
+          ),
+        ).marginSymmetric(horizontal: 10),
+      ]),
+    );
+  }
+
+  buildTunnelInputCell(BuildContext context,
+      {required TextEditingController controller,
+      List<TextInputFormatter>? inputFormatters,
+      String? hint}) {
+    return Expanded(
+      child: Padding(
+          padding: const EdgeInsets.all(10.0),
+          child: TextField(
+              controller: controller,
+              inputFormatters: inputFormatters,
+              decoration: InputDecoration(
+                hintText: hint,
+              )).workaroundFreezeLinuxMint()),
+    );
+  }
+
+  Widget buildTunnelDataRow(BuildContext context, _PortForward pf, int index) {
+    text(String label) => Expanded(
+        child: Text(label, style: const TextStyle(fontSize: 20))
+            .marginOnly(left: _kTextLeftMargin));
+
+    return Container(
+      height: _kRowHeight,
+      decoration: BoxDecoration(
+          color: index % 2 == 0
+              ? MyTheme.currentThemeMode() == ThemeMode.dark
+                  ? const Color(0xFF202020)
+                  : const Color(0xFFF4F5F6)
+              : Theme.of(context).colorScheme.background),
+      child: Row(children: [
+        text(pf.localPort.toString()),
+        const SizedBox(width: _kColumn1Width),
+        text(pf.remoteHost),
+        text(pf.remotePort.toString()),
+        SizedBox(
+          width: _kColumn4Width,
+          child: IconButton(
+            icon: const Icon(Icons.close),
+            onPressed: () async {
+              await bind.sessionRemovePortForward(
+                  sessionId: _ffi.sessionId, localPort: pf.localPort);
+              refreshTunnelConfig();
+            },
+          ),
+        ),
+      ]),
+    );
+  }
+
+  void refreshTunnelConfig() async {
+    String peer = bind.mainGetPeerSync(id: widget.id);
+    Map<String, dynamic> config = jsonDecode(peer);
+    List<dynamic> infos = config['port_forwards'] as List;
+    List<_PortForward> result = List.empty(growable: true);
+    for (var e in infos) {
+      result.add(_PortForward.fromJson(e));
+    }
+    pfs.value = result;
+  }
+
+  buildRdp(BuildContext context) {
+    text1(String label) => Expanded(
+        child: Text(translate(label)).marginOnly(left: _kTextLeftMargin));
+    text2(String label) => Expanded(
+            child: Text(
+          label,
+          style: const TextStyle(fontSize: 20),
+        ).marginOnly(left: _kTextLeftMargin));
+    return Theme(
+      data: Theme.of(context)
+          .copyWith(colorScheme: Theme.of(context).colorScheme),
+      child: ListView.builder(
+          controller: ScrollController(),
+          itemCount: 2,
+          itemBuilder: ((context, index) {
+            if (index == 0) {
+              return Container(
+                height: 25,
+                color: Theme.of(context).scaffoldBackgroundColor,
+                child: Row(children: [
+                  text1('Local Port'),
+                  const SizedBox(width: _kColumn1Width),
+                  text1('Remote Host'),
+                  text1('Remote Port'),
+                ]),
+              );
+            } else {
+              return Container(
+                height: _kRowHeight,
+                decoration: BoxDecoration(
+                    color: Theme.of(context).colorScheme.background),
+                child: Row(children: [
+                  Expanded(
+                    child: Align(
+                      alignment: Alignment.centerLeft,
+                      child: SizedBox(
+                        width: 120,
+                        child: ElevatedButton(
+                          onPressed: () =>
+                              bind.sessionNewRdp(sessionId: _ffi.sessionId),
+                          child: Text(
+                            translate('New RDP'),
+                          ),
+                        ).marginSymmetric(vertical: 10),
+                      ).marginOnly(left: 20),
+                    ),
+                  ),
+                  const SizedBox(
+                      width: _kColumn1Width,
+                      child: Icon(Icons.arrow_forward_sharp)),
+                  text2('localhost'),
+                  text2('RDP'),
+                ]),
+              );
+            }
+          })),
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}

flutter/lib/desktop/pages/port_forward_tab_page.dart

@@ -0,0 +1,149 @@
+import 'dart:convert';
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:flutter_hbb/desktop/pages/port_forward_page.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/utils/multi_window_manager.dart';
+import 'package:get/get.dart';
+
+class PortForwardTabPage extends StatefulWidget {
+  final Map<String, dynamic> params;
+
+  const PortForwardTabPage({Key? key, required this.params}) : super(key: key);
+
+  @override
+  State<PortForwardTabPage> createState() => _PortForwardTabPageState(params);
+}
+
+class _PortForwardTabPageState extends State<PortForwardTabPage> {
+  late final DesktopTabController tabController;
+  late final bool isRDP;
+
+  static const IconData selectedIcon = Icons.forward_sharp;
+  static const IconData unselectedIcon = Icons.forward_outlined;
+
+  _PortForwardTabPageState(Map<String, dynamic> params) {
+    isRDP = params['isRDP'];
+    tabController =
+        Get.put(DesktopTabController(tabType: DesktopTabType.portForward));
+    tabController.onSelected = (id) {
+      WindowController.fromWindowId(windowId())
+          .setTitle(getWindowNameWithId(id));
+    };
+    tabController.onRemoved = (_, id) => onRemoveId(id);
+    tabController.add(TabInfo(
+        key: params['id'],
+        label: params['id'],
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        page: PortForwardPage(
+          key: ValueKey(params['id']),
+          id: params['id'],
+          password: params['password'],
+          isSharedPassword: params['isSharedPassword'],
+          tabController: tabController,
+          isRDP: isRDP,
+          forceRelay: params['forceRelay'],
+          connToken: params['connToken'],
+        )));
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
+      debugPrint(
+          "[Port Forward] call ${call.method} with args ${call.arguments} from window $fromWindowId");
+      // for simplify, just replace connectionId
+      if (call.method == kWindowEventNewPortForward) {
+        final args = jsonDecode(call.arguments);
+        final id = args['id'];
+        final isRDP = args['isRDP'];
+        windowOnTop(windowId());
+        if (tabController.state.value.tabs.indexWhere((e) => e.key == id) >=
+            0) {
+          debugPrint("port forward $id exists");
+          return;
+        }
+        tabController.add(TabInfo(
+            key: id,
+            label: id,
+            selectedIcon: selectedIcon,
+            unselectedIcon: unselectedIcon,
+            page: PortForwardPage(
+              key: ValueKey(args['id']),
+              id: id,
+              password: args['password'],
+              isSharedPassword: args['isSharedPassword'],
+              isRDP: isRDP,
+              tabController: tabController,
+              forceRelay: args['forceRelay'],
+              connToken: args['connToken'],
+            )));
+      } else if (call.method == "onDestroy") {
+        tabController.clear();
+      } else if (call.method == kWindowActionRebuild) {
+        reloadCurrentWindow();
+      }
+    });
+    Future.delayed(Duration.zero, () {
+      restoreWindowPosition(WindowType.PortForward, windowId: windowId());
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final child = Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: DesktopTab(
+        controller: tabController,
+        onWindowCloseButton: () async {
+          tabController.clear();
+          return true;
+        },
+        tail: AddButton(),
+        selectedBorderColor: MyTheme.accent,
+        labelGetter: DesktopTab.tablabelGetter,
+      ),
+    );
+    final tabWidget = isLinux
+        ? buildVirtualWindowFrame(
+            context,
+            Scaffold(
+                backgroundColor: Theme.of(context).colorScheme.background,
+                body: child),
+          )
+        : workaroundWindowBorder(
+            context,
+            Container(
+              decoration: BoxDecoration(
+                  border: Border.all(color: MyTheme.color(context).border!)),
+              child: child,
+            ));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : Obx(
+            () => SubWindowDragToResizeArea(
+              child: tabWidget,
+              resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+              enableResizeEdges: subWindowManagerEnableResizeEdges,
+              windowId: stateGlobal.windowId,
+            ),
+          );
+  }
+
+  void onRemoveId(String id) {
+    if (tabController.state.value.tabs.isEmpty) {
+      WindowController.fromWindowId(windowId()).close();
+    }
+  }
+
+  int windowId() {
+    return widget.params["windowId"];
+  }
+}

flutter/lib/desktop/pages/remote_tab_page.dart

@@ -0,0 +1,624 @@
+import 'dart:convert';
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/common/shared_state.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/models/input_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:flutter_hbb/desktop/pages/remote_page.dart';
+import 'package:flutter_hbb/desktop/widgets/remote_toolbar.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/desktop/widgets/material_mod_popup_menu.dart'
+    as mod_menu;
+import 'package:flutter_hbb/desktop/widgets/popup_menu.dart';
+import 'package:flutter_hbb/utils/multi_window_manager.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:bot_toast/bot_toast.dart';
+
+import '../../common/widgets/dialog.dart';
+import '../../models/platform_model.dart';
+
+class _MenuTheme {
+  static const Color blueColor = MyTheme.button;
+  // kMinInteractiveDimension
+  static const double height = 20.0;
+  static const double dividerHeight = 12.0;
+}
+
+class ConnectionTabPage extends StatefulWidget {
+  final Map<String, dynamic> params;
+
+  const ConnectionTabPage({Key? key, required this.params}) : super(key: key);
+
+  @override
+  State<ConnectionTabPage> createState() => _ConnectionTabPageState(params);
+}
+
+class _ConnectionTabPageState extends State<ConnectionTabPage> {
+  final tabController =
+      Get.put(DesktopTabController(tabType: DesktopTabType.remoteScreen));
+  final contentKey = UniqueKey();
+  static const IconData selectedIcon = Icons.desktop_windows_sharp;
+  static const IconData unselectedIcon = Icons.desktop_windows_outlined;
+
+  String? peerId;
+  bool _isScreenRectSet = false;
+  int? _display;
+
+  var connectionMap = RxList<Widget>.empty(growable: true);
+
+  _ConnectionTabPageState(Map<String, dynamic> params) {
+    RemoteCountState.init();
+    peerId = params['id'];
+    final sessionId = params['session_id'];
+    final tabWindowId = params['tab_window_id'];
+    final display = params['display'];
+    final displays = params['displays'];
+    final screenRect = parseParamScreenRect(params);
+    _isScreenRectSet = screenRect != null;
+    _display = display as int?;
+    tryMoveToScreenAndSetFullscreen(screenRect);
+    if (peerId != null) {
+      ConnectionTypeState.init(peerId!);
+      tabController.onSelected = (id) {
+        final remotePage = tabController.widget(id);
+        if (remotePage is RemotePage) {
+          final ffi = remotePage.ffi;
+          bind.setCurSessionId(sessionId: ffi.sessionId);
+        }
+        WindowController.fromWindowId(params['windowId'])
+            .setTitle(getWindowNameWithId(id));
+        UnreadChatCountState.find(id).value = 0;
+      };
+      tabController.add(TabInfo(
+        key: peerId!,
+        label: peerId!,
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        onTabCloseButton: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: peerId!,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(peerId!);
+        },
+        page: RemotePage(
+          key: ValueKey(peerId),
+          id: peerId!,
+          sessionId: sessionId == null ? null : SessionID(sessionId),
+          tabWindowId: tabWindowId,
+          display: display,
+          displays: displays?.cast<int>(),
+          password: params['password'],
+          toolbarState: ToolbarState(),
+          tabController: tabController,
+          switchUuid: params['switch_uuid'],
+          forceRelay: params['forceRelay'],
+          isSharedPassword: params['isSharedPassword'],
+        ),
+      ));
+      _update_remote_count();
+    }
+    tabController.onRemoved = (_, id) => onRemoveId(id);
+    rustDeskWinManager.setMethodHandler(_remoteMethodHandler);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (!_isScreenRectSet) {
+      Future.delayed(Duration.zero, () {
+        restoreWindowPosition(
+          WindowType.RemoteDesktop,
+          windowId: windowId(),
+          peerId: tabController.state.value.tabs.isEmpty
+              ? null
+              : tabController.state.value.tabs[0].key,
+          display: _display,
+        );
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final child = Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: DesktopTab(
+        controller: tabController,
+        onWindowCloseButton: handleWindowCloseButton,
+        tail: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _RelativeMouseModeHint(tabController: tabController),
+            const AddButton(),
+          ],
+        ),
+        selectedBorderColor: MyTheme.accent,
+        pageViewBuilder: (pageView) => pageView,
+        labelGetter: DesktopTab.tablabelGetter,
+        tabBuilder: (key, icon, label, themeConf) => Obx(() {
+          final connectionType = ConnectionTypeState.find(key);
+          if (!connectionType.isValid()) {
+            return Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                icon,
+                label,
+              ],
+            );
+          } else {
+            bool secure =
+                connectionType.secure.value == ConnectionType.strSecure;
+            bool direct =
+                connectionType.direct.value == ConnectionType.strDirect;
+            String msgConn = getConnectionText(
+                secure, direct, connectionType.stream_type.value);
+            var msgFingerprint = '${translate('Fingerprint')}:\n';
+            var fingerprint = FingerprintState.find(key).value;
+            if (fingerprint.isEmpty) {
+              fingerprint = 'N/A';
+            }
+            if (fingerprint.length > 5 * 8) {
+              var first = fingerprint.substring(0, 39);
+              var second = fingerprint.substring(40);
+              msgFingerprint += '$first\n$second';
+            } else {
+              msgFingerprint += fingerprint;
+            }
+
+            final tab = Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                icon,
+                Tooltip(
+                  message: '$msgConn\n$msgFingerprint',
+                  child: SvgPicture.asset(
+                    'assets/${connectionType.secure.value}${connectionType.direct.value}.svg',
+                    width: themeConf.iconSize,
+                    height: themeConf.iconSize,
+                  ).paddingOnly(right: 5),
+                ),
+                label,
+                unreadMessageCountBuilder(UnreadChatCountState.find(key))
+                    .marginOnly(left: 4),
+              ],
+            );
+
+            return Listener(
+              onPointerDown: (e) {
+                if (e.kind != ui.PointerDeviceKind.mouse) {
+                  return;
+                }
+                final remotePage = tabController.state.value.tabs
+                    .firstWhere((tab) => tab.key == key)
+                    .page as RemotePage;
+                if (remotePage.ffi.ffiModel.pi.isSet.isTrue && e.buttons == 2) {
+                  showRightMenu(
+                    (CancelFunc cancelFunc) {
+                      return _tabMenuBuilder(key, cancelFunc);
+                    },
+                    target: e.position,
+                  );
+                }
+              },
+              child: tab,
+            );
+          }
+        }),
+      ),
+    );
+    final tabWidget = isLinux
+        ? buildVirtualWindowFrame(context, child)
+        : workaroundWindowBorder(
+            context,
+            Obx(() => Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                        color: MyTheme.color(context).border!,
+                        width: stateGlobal.windowBorderWidth.value),
+                  ),
+                  child: child,
+                )));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : Obx(() => SubWindowDragToResizeArea(
+              key: contentKey,
+              child: tabWidget,
+              // Specially configured for a better resize area and remote control.
+              childPadding: kDragToResizeAreaPadding,
+              resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+              enableResizeEdges: subWindowManagerEnableResizeEdges,
+              windowId: stateGlobal.windowId,
+            ));
+  }
+
+  // Note: Some dup code to ../widgets/remote_toolbar
+  Widget _tabMenuBuilder(String key, CancelFunc cancelFunc) {
+    final List<MenuEntryBase<String>> menu = [];
+    const EdgeInsets padding = EdgeInsets.only(left: 8.0, right: 5.0);
+    final remotePage = tabController.state.value.tabs
+        .firstWhere((tab) => tab.key == key)
+        .page as RemotePage;
+    final ffi = remotePage.ffi;
+    final pi = ffi.ffiModel.pi;
+    final perms = ffi.ffiModel.permissions;
+    final sessionId = ffi.sessionId;
+    final toolbarState = remotePage.toolbarState;
+    menu.addAll([
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Obx(() => Text(
+              translate(
+                  toolbarState.hide.isTrue ? 'Show Toolbar' : 'Hide Toolbar'),
+              style: style,
+            )),
+        proc: () {
+          toolbarState.switchHide(sessionId);
+          cancelFunc();
+        },
+        padding: padding,
+      ),
+    ]);
+
+    if (tabController.state.value.tabs.length > 1) {
+      final splitAction = MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Move tab to new window'),
+          style: style,
+        ),
+        proc: () async {
+          await DesktopMultiWindow.invokeMethod(
+              kMainWindowId,
+              kWindowEventMoveTabToNewWindow,
+              '${windowId()},$key,$sessionId,RemoteDesktop');
+          cancelFunc();
+        },
+        padding: padding,
+      );
+      menu.insert(1, splitAction);
+    }
+
+    if (perms['restart'] != false &&
+        (pi.platform == kPeerPlatformLinux ||
+            pi.platform == kPeerPlatformWindows ||
+            pi.platform == kPeerPlatformMacOS)) {
+      menu.add(MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Restart remote device'),
+          style: style,
+        ),
+        proc: () => showRestartRemoteDevice(
+            pi, peerId ?? '', sessionId, ffi.dialogManager),
+        padding: padding,
+        dismissOnClicked: true,
+        dismissCallback: cancelFunc,
+      ));
+    }
+
+    if (perms['keyboard'] != false && !ffi.ffiModel.viewOnly) {
+      menu.add(RemoteMenuEntry.insertLock(sessionId, padding,
+          dismissFunc: cancelFunc));
+
+      if (pi.platform == kPeerPlatformLinux || pi.sasEnabled) {
+        menu.add(RemoteMenuEntry.insertCtrlAltDel(sessionId, padding,
+            dismissFunc: cancelFunc));
+      }
+    }
+
+    menu.addAll([
+      MenuEntryDivider<String>(),
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Copy Fingerprint'),
+          style: style,
+        ),
+        proc: () => onCopyFingerprint(FingerprintState.find(key).value),
+        padding: padding,
+        dismissOnClicked: true,
+        dismissCallback: cancelFunc,
+      ),
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Close'),
+          style: style,
+        ),
+        proc: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: key,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(key);
+          cancelFunc();
+        },
+        padding: padding,
+      )
+    ]);
+
+    return mod_menu.PopupMenu<String>(
+      items: menu
+          .map((entry) => entry.build(
+              context,
+              const MenuConfig(
+                commonColor: _MenuTheme.blueColor,
+                height: _MenuTheme.height,
+                dividerHeight: _MenuTheme.dividerHeight,
+              )))
+          .expand((i) => i)
+          .toList(),
+    );
+  }
+
+  void onRemoveId(String id) async {
+    if (tabController.state.value.tabs.isEmpty) {
+      // Keep calling until the window status is hidden.
+      //
+      // Workaround for Windows:
+      // If you click other buttons and close in msgbox within a very short period of time, the close may fail.
+      // `await WindowController.fromWindowId(windowId()).close();`.
+      Future<void> loopCloseWindow() async {
+        int c = 0;
+        final windowController = WindowController.fromWindowId(windowId());
+        while (c < 20 &&
+            tabController.state.value.tabs.isEmpty &&
+            (!await windowController.isHidden())) {
+          await windowController.close();
+          await Future.delayed(Duration(milliseconds: 100));
+          c++;
+        }
+      }
+
+      loopCloseWindow();
+    }
+    ConnectionTypeState.delete(id);
+    // Clean up relative mouse mode state for this peer.
+    stateGlobal.relativeMouseModeState.remove(id);
+    _update_remote_count();
+  }
+
+  int windowId() {
+    return widget.params["windowId"];
+  }
+
+  Future<bool> handleWindowCloseButton() async {
+    final connLength = tabController.length;
+    if (connLength == 1) {
+      if (await desktopTryShowTabAuditDialogCloseCancelled(
+        id: tabController.state.value.tabs[0].key,
+        tabController: tabController,
+      )) {
+        return false;
+      }
+    }
+    if (connLength <= 1) {
+      tabController.clear();
+      return true;
+    } else {
+      final bool res;
+      if (!option2bool(kOptionEnableConfirmClosingTabs,
+          bind.mainGetLocalOption(key: kOptionEnableConfirmClosingTabs))) {
+        res = true;
+      } else {
+        res = await closeConfirmDialog();
+      }
+      if (res) {
+        tabController.clear();
+      }
+      return res;
+    }
+  }
+
+  _update_remote_count() =>
+      RemoteCountState.find().value = tabController.length;
+
+  Future<dynamic> _remoteMethodHandler(call, fromWindowId) async {
+    debugPrint(
+        "[Remote Page] call ${call.method} with args ${call.arguments} from window $fromWindowId");
+
+    dynamic returnValue;
+    // for simplify, just replace connectionId
+    if (call.method == kWindowEventNewRemoteDesktop) {
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final switchUuid = args['switch_uuid'];
+      final sessionId = args['session_id'];
+      final tabWindowId = args['tab_window_id'];
+      final display = args['display'];
+      final displays = args['displays'];
+      final screenRect = parseParamScreenRect(args);
+      final prePeerCount = tabController.length;
+      Future.delayed(Duration.zero, () async {
+        if (stateGlobal.fullscreen.isTrue) {
+          await WindowController.fromWindowId(windowId()).setFullscreen(false);
+          stateGlobal.setFullscreen(false, procWnd: false);
+        }
+        await setNewConnectWindowFrame(windowId(), id!, prePeerCount,
+            WindowType.RemoteDesktop, display, screenRect);
+        Future.delayed(Duration(milliseconds: isWindows ? 100 : 0), () async {
+          await windowOnTop(windowId());
+        });
+      });
+      ConnectionTypeState.init(id);
+      tabController.add(TabInfo(
+        key: id,
+        label: id,
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        onTabCloseButton: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: id,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(id);
+        },
+        page: RemotePage(
+          key: ValueKey(id),
+          id: id,
+          sessionId: sessionId == null ? null : SessionID(sessionId),
+          tabWindowId: tabWindowId,
+          display: display,
+          displays: displays?.cast<int>(),
+          password: args['password'],
+          toolbarState: ToolbarState(),
+          tabController: tabController,
+          switchUuid: switchUuid,
+          forceRelay: args['forceRelay'],
+          isSharedPassword: args['isSharedPassword'],
+        ),
+      ));
+    } else if (call.method == kWindowDisableGrabKeyboard) {
+      // ???
+    } else if (call.method == "onDestroy") {
+      tabController.clear();
+    } else if (call.method == kWindowActionRebuild) {
+      reloadCurrentWindow();
+    } else if (call.method == kWindowEventActiveSession) {
+      final jumpOk = tabController.jumpToByKey(call.arguments);
+      if (jumpOk) {
+        windowOnTop(windowId());
+      }
+      return jumpOk;
+    } else if (call.method == kWindowEventActiveDisplaySession) {
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final display = args['display'];
+      final jumpOk = tabController.jumpToByKeyAndDisplay(id, display);
+      if (jumpOk) {
+        windowOnTop(windowId());
+      }
+      return jumpOk;
+    } else if (call.method == kWindowEventGetRemoteList) {
+      return tabController.state.value.tabs
+          .map((e) => e.key)
+          .toList()
+          .join(',');
+    } else if (call.method == kWindowEventGetSessionIdList) {
+      return tabController.state.value.tabs
+          .map((e) => '${e.key},${(e.page as RemotePage).ffi.sessionId}')
+          .toList()
+          .join(';');
+    } else if (call.method == kWindowEventGetCachedSessionData) {
+      // Ready to show new window and close old tab.
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final close = args['close'];
+      try {
+        final remotePage = tabController.state.value.tabs
+            .firstWhere((tab) => tab.key == id)
+            .page as RemotePage;
+        returnValue = remotePage.ffi.ffiModel.cachedPeerData.toString();
+      } catch (e) {
+        debugPrint('Failed to get cached session data: $e');
+      }
+      if (close && returnValue != null) {
+        closeSessionOnDispose[id] = false;
+        tabController.closeBy(id);
+      }
+    } else if (call.method == kWindowEventRemoteWindowCoords) {
+      final remotePage =
+          tabController.state.value.selectedTabInfo.page as RemotePage;
+      final ffi = remotePage.ffi;
+      final displayRect = ffi.ffiModel.displaysRect();
+      if (displayRect != null) {
+        final wc = WindowController.fromWindowId(windowId());
+        Rect? frame;
+        try {
+          frame = await wc.getFrame();
+        } catch (e) {
+          debugPrint(
+              "Failed to get frame of window $windowId, it may be hidden");
+        }
+        if (frame != null) {
+          ffi.cursorModel.moveLocal(0, 0);
+          final coords = RemoteWindowCoords(
+              frame,
+              CanvasCoords.fromCanvasModel(ffi.canvasModel),
+              CursorCoords.fromCursorModel(ffi.cursorModel),
+              displayRect);
+          returnValue = jsonEncode(coords.toJson());
+        }
+      }
+    } else if (call.method == kWindowEventSetFullscreen) {
+      stateGlobal.setFullscreen(call.arguments == 'true');
+    }
+    _update_remote_count();
+    return returnValue;
+  }
+}
+
+/// A widget that displays a hint in the tab bar when relative mouse mode is active.
+/// This helps users remember how to exit relative mouse mode.
+class _RelativeMouseModeHint extends StatelessWidget {
+  final DesktopTabController tabController;
+
+  const _RelativeMouseModeHint({Key? key, required this.tabController})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() {
+      // Check if there are any tabs
+      if (tabController.state.value.tabs.isEmpty) {
+        return const SizedBox.shrink();
+      }
+
+      // Get current selected tab's RemotePage
+      final selectedTabInfo = tabController.state.value.selectedTabInfo;
+      if (selectedTabInfo.page is! RemotePage) {
+        return const SizedBox.shrink();
+      }
+
+      final remotePage = selectedTabInfo.page as RemotePage;
+      final String peerId = remotePage.id;
+
+      // Use global state to check relative mouse mode (synced from InputModel).
+      // This avoids timing issues with FFI registration.
+      final isRelativeMouseMode =
+          stateGlobal.relativeMouseModeState[peerId] ?? false;
+
+      if (!isRelativeMouseMode) {
+        return const SizedBox.shrink();
+      }
+
+      return Container(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        margin: const EdgeInsets.only(right: 8),
+        decoration: BoxDecoration(
+          color: Colors.orange.withOpacity(0.2),
+          borderRadius: BorderRadius.circular(4),
+          border: Border.all(color: Colors.orange.withOpacity(0.5)),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.mouse,
+              size: 14,
+              color: Colors.orange[700],
+            ),
+            const SizedBox(width: 4),
+            Text(
+              translate(
+                  'rel-mouse-exit-{${isMacOS ? "Cmd+G" : "Ctrl+Alt"}}-tip'),
+              style: TextStyle(
+                fontSize: 11,
+                color: Colors.orange[700],
+              ),
+            ),
+          ],
+        ),
+      );
+    });
+  }
+}

flutter/lib/desktop/pages/terminal_connection_manager.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/foundation.dart';
+import 'package:get/get.dart';
+import '../../models/model.dart';
+
+/// Manages terminal connections to ensure one FFI instance per peer
+class TerminalConnectionManager {
+  static final Map<String, FFI> _connections = {};
+  static final Map<String, int> _connectionRefCount = {};
+  
+  // Track service IDs per peer
+  static final Map<String, String> _serviceIds = {};
+
+  /// Get or create an FFI instance for a peer
+  static FFI getConnection({
+    required String peerId,
+    required String? password,
+    required bool? isSharedPassword,
+    required bool? forceRelay,
+    required String? connToken,
+  }) {
+    final existingFfi = _connections[peerId];
+    if (existingFfi != null && !existingFfi.closed) {
+      // Increment reference count
+      _connectionRefCount[peerId] = (_connectionRefCount[peerId] ?? 0) + 1;
+      debugPrint('[TerminalConnectionManager] Reusing existing connection for peer $peerId. Reference count: ${_connectionRefCount[peerId]}');
+      return existingFfi;
+    }
+
+    // Create new FFI instance for first terminal
+    debugPrint('[TerminalConnectionManager] Creating new terminal connection for peer $peerId');
+    final ffi = FFI(null);
+    ffi.start(
+      peerId,
+      password: password,
+      isSharedPassword: isSharedPassword,
+      forceRelay: forceRelay,
+      connToken: connToken,
+      isTerminal: true,
+    );
+    
+    _connections[peerId] = ffi;
+    _connectionRefCount[peerId] = 1;
+    
+    // Register the FFI instance with Get for dependency injection
+    Get.put<FFI>(ffi, tag: 'terminal_$peerId');
+    
+    debugPrint('[TerminalConnectionManager] New connection created. Total connections: ${_connections.length}');
+    return ffi;
+  }
+
+  /// Release a connection reference
+  static void releaseConnection(String peerId) {
+    final refCount = _connectionRefCount[peerId] ?? 0;
+    debugPrint('[TerminalConnectionManager] Releasing connection for peer $peerId. Current ref count: $refCount');
+    
+    if (refCount <= 1) {
+      // Last reference, close the connection
+      final ffi = _connections[peerId];
+      if (ffi != null) {
+        debugPrint('[TerminalConnectionManager] Closing connection for peer $peerId (last reference)');
+        ffi.close();
+        _connections.remove(peerId);
+        _connectionRefCount.remove(peerId);
+        Get.delete<FFI>(tag: 'terminal_$peerId');
+      }
+    } else {
+      // Decrement reference count
+      _connectionRefCount[peerId] = refCount - 1;
+      debugPrint('[TerminalConnectionManager] Connection still in use. New ref count: ${_connectionRefCount[peerId]}');
+    }
+  }
+
+  /// Check if a connection exists for a peer
+  static bool hasConnection(String peerId) {
+    final ffi = _connections[peerId];
+    return ffi != null && !ffi.closed;
+  }
+  
+  /// Get existing connection without creating new one
+  static FFI? getExistingConnection(String peerId) {
+    return _connections[peerId];
+  }
+
+  /// Get connection count for debugging
+  static int getConnectionCount() => _connections.length;
+  
+  /// Get terminal count for a peer
+  static int getTerminalCount(String peerId) => _connectionRefCount[peerId] ?? 0;
+  
+  /// Get service ID for a peer
+  static String? getServiceId(String peerId) => _serviceIds[peerId];
+  
+  /// Set service ID for a peer
+  static void setServiceId(String peerId, String serviceId) {
+    _serviceIds[peerId] = serviceId;
+    debugPrint('[TerminalConnectionManager] Service ID for $peerId: $serviceId');
+  }
+}

flutter/lib/desktop/pages/terminal_page.dart

@@ -0,0 +1,223 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/models/model.dart';
+import 'package:flutter_hbb/models/terminal_model.dart';
+import 'package:xterm/xterm.dart';
+import 'terminal_connection_manager.dart';
+
+class TerminalPage extends StatefulWidget {
+  TerminalPage({
+    Key? key,
+    required this.id,
+    required this.password,
+    required this.tabController,
+    required this.isSharedPassword,
+    required this.terminalId,
+    required this.tabKey,
+    this.forceRelay,
+    this.connToken,
+  }) : super(key: key);
+  final String id;
+  final String? password;
+  final DesktopTabController tabController;
+  final bool? forceRelay;
+  final bool? isSharedPassword;
+  final String? connToken;
+  final int terminalId;
+
+  /// Tab key for focus management, passed from parent to avoid duplicate construction
+  final String tabKey;
+  final SimpleWrapper<State<TerminalPage>?> _lastState = SimpleWrapper(null);
+
+  FFI get ffi => (_lastState.value! as _TerminalPageState)._ffi;
+
+  @override
+  State<TerminalPage> createState() {
+    final state = _TerminalPageState();
+    _lastState.value = state;
+    return state;
+  }
+}
+
+class _TerminalPageState extends State<TerminalPage>
+    with AutomaticKeepAliveClientMixin {
+  static const EdgeInsets _defaultTerminalPadding =
+      EdgeInsets.symmetric(horizontal: 5.0, vertical: 2.0);
+
+  late FFI _ffi;
+  late TerminalModel _terminalModel;
+  double? _cellHeight;
+  final FocusNode _terminalFocusNode = FocusNode(canRequestFocus: false);
+  StreamSubscription<DesktopTabState>? _tabStateSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // Listen for tab selection changes to request focus
+    _tabStateSubscription = widget.tabController.state.listen(_onTabStateChanged);
+
+    // Use shared FFI instance from connection manager
+    _ffi = TerminalConnectionManager.getConnection(
+      peerId: widget.id,
+      password: widget.password,
+      isSharedPassword: widget.isSharedPassword,
+      forceRelay: widget.forceRelay,
+      connToken: widget.connToken,
+    );
+
+    // Create terminal model with specific terminal ID
+    _terminalModel = TerminalModel(_ffi, widget.terminalId);
+    debugPrint(
+        '[TerminalPage] Terminal model created for terminal ${widget.terminalId}');
+
+    _terminalModel.onResizeExternal = (w, h, pw, ph) {
+      _cellHeight = ph * 1.0;
+
+      // Enable focus once terminal has valid dimensions (first valid resize)
+      if (!_terminalFocusNode.canRequestFocus && w > 0 && h > 0) {
+        _terminalFocusNode.canRequestFocus = true;
+        // Auto-focus if this tab is currently selected
+        _requestFocusIfSelected();
+      }
+
+      // Schedule the setState for the next frame
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          setState(() {});
+        }
+      });
+    };
+
+    // Register this terminal model with FFI for event routing
+    _ffi.registerTerminalModel(widget.terminalId, _terminalModel);
+
+    // Initialize terminal connection
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      widget.tabController.onSelected?.call(widget.id);
+
+      // Check if this is a new connection or additional terminal
+      // Note: When a connection exists, the ref count will be > 1 after this terminal is added
+      final isExistingConnection =
+          TerminalConnectionManager.hasConnection(widget.id) &&
+              TerminalConnectionManager.getTerminalCount(widget.id) > 1;
+
+      if (!isExistingConnection) {
+        // First terminal - show loading dialog, wait for onReady
+        _ffi.dialogManager
+            .showLoading(translate('Connecting...'), onCancel: closeConnection);
+      } else {
+        // Additional terminal - connection already established
+        // Open the terminal directly
+        _terminalModel.openTerminal();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    // Cancel tab state subscription to prevent memory leak
+    _tabStateSubscription?.cancel();
+    // Unregister terminal model from FFI
+    _ffi.unregisterTerminalModel(widget.terminalId);
+    _terminalModel.dispose();
+    _terminalFocusNode.dispose();
+    // Release connection reference instead of closing directly
+    TerminalConnectionManager.releaseConnection(widget.id);
+    super.dispose();
+  }
+
+  void _onTabStateChanged(DesktopTabState state) {
+    // Check if this tab is now selected and request focus
+    if (state.selected >= 0 && state.selected < state.tabs.length) {
+      final selectedTab = state.tabs[state.selected];
+      if (selectedTab.key == widget.tabKey && mounted) {
+        _requestFocusIfSelected();
+      }
+    }
+  }
+
+  void _requestFocusIfSelected() {
+    if (!mounted || !_terminalFocusNode.canRequestFocus) return;
+    // Use post-frame callback to ensure widget is fully laid out in focus tree
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // Re-check conditions after frame: mounted, focusable, still selected, not already focused
+      if (!mounted || !_terminalFocusNode.canRequestFocus || _terminalFocusNode.hasFocus) return;
+      final state = widget.tabController.state.value;
+      if (state.selected >= 0 && state.selected < state.tabs.length) {
+        if (state.tabs[state.selected].key == widget.tabKey) {
+          _terminalFocusNode.requestFocus();
+        }
+      }
+    });
+  }
+
+  // This method ensures that the number of visible rows is an integer by computing the
+  // extra space left after dividing the available height by the height of a single
+  // terminal row (`_cellHeight`) and distributing it evenly as top and bottom padding.
+  EdgeInsets _calculatePadding(double heightPx) {
+    final cellHeight = _cellHeight;
+    if (!heightPx.isFinite ||
+        heightPx <= 0 ||
+        cellHeight == null ||
+        !cellHeight.isFinite ||
+        cellHeight <= 0) {
+      return _defaultTerminalPadding;
+    }
+    final rows = (heightPx / cellHeight).floor();
+    if (rows <= 0) {
+      return _defaultTerminalPadding;
+    }
+    final extraSpace = heightPx - rows * cellHeight;
+    if (!extraSpace.isFinite || extraSpace < 0) {
+      return _defaultTerminalPadding;
+    }
+    final topBottom = extraSpace / 2.0;
+    return EdgeInsets.symmetric(
+      horizontal: _defaultTerminalPadding.horizontal / 2,
+      vertical: topBottom,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return Scaffold(
+      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+      body: LayoutBuilder(
+        builder: (context, constraints) {
+          final heightPx = constraints.maxHeight;
+          return TerminalView(
+            _terminalModel.terminal,
+            controller: _terminalModel.terminalController,
+            focusNode: _terminalFocusNode,
+            // Note: autofocus is not used here because focus is managed manually
+            // via _onTabStateChanged() to handle tab switching properly.
+            backgroundOpacity: 0.7,
+            padding: _calculatePadding(heightPx),
+            onSecondaryTapDown: (details, offset) async {
+              final selection = _terminalModel.terminalController.selection;
+              if (selection != null) {
+                final text = _terminalModel.terminal.buffer.getText(selection);
+                _terminalModel.terminalController.clearSelection();
+                await Clipboard.setData(ClipboardData(text: text));
+              } else {
+                final data = await Clipboard.getData('text/plain');
+                final text = data?.text;
+                if (text != null) {
+                  _terminalModel.terminal.paste(text);
+                }
+              }
+            },
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}

flutter/lib/desktop/pages/terminal_tab_page.dart

@@ -0,0 +1,625 @@
+import 'dart:convert';
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/common/widgets/dialog.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/utils/multi_window_manager.dart';
+import 'package:flutter_hbb/models/model.dart';
+import 'package:get/get.dart';
+
+import '../../models/platform_model.dart';
+import 'terminal_page.dart';
+import 'terminal_connection_manager.dart';
+import '../widgets/material_mod_popup_menu.dart' as mod_menu;
+import '../widgets/popup_menu.dart';
+import 'package:bot_toast/bot_toast.dart';
+
+class TerminalTabPage extends StatefulWidget {
+  final Map<String, dynamic> params;
+
+  const TerminalTabPage({Key? key, required this.params}) : super(key: key);
+
+  @override
+  State<TerminalTabPage> createState() => _TerminalTabPageState(params);
+}
+
+class _TerminalTabPageState extends State<TerminalTabPage> {
+  DesktopTabController get tabController => Get.find<DesktopTabController>();
+
+  static const IconData selectedIcon = Icons.terminal;
+  static const IconData unselectedIcon = Icons.terminal_outlined;
+  int _nextTerminalId = 1;
+  // Lightweight idempotency guard for async close operations
+  final Set<String> _closingTabs = {};
+  // When true, all session cleanup should persist (window-level close in progress)
+  bool _windowClosing = false;
+
+  _TerminalTabPageState(Map<String, dynamic> params) {
+    Get.put(DesktopTabController(tabType: DesktopTabType.terminal));
+    tabController.onSelected = (id) {
+      WindowController.fromWindowId(windowId())
+          .setTitle(getWindowNameWithId(id));
+    };
+    tabController.onRemoved = (_, id) => onRemoveId(id);
+    tabController.onCloseWindow = _closeWindowFromConnection;
+    final terminalId = params['terminalId'] ?? _nextTerminalId++;
+    tabController.add(_createTerminalTab(
+      peerId: params['id'],
+      terminalId: terminalId,
+      password: params['password'],
+      isSharedPassword: params['isSharedPassword'],
+      forceRelay: params['forceRelay'],
+      connToken: params['connToken'],
+    ));
+  }
+
+  TabInfo _createTerminalTab({
+    required String peerId,
+    required int terminalId,
+    String? password,
+    bool? isSharedPassword,
+    bool? forceRelay,
+    String? connToken,
+  }) {
+    final tabKey = '${peerId}_$terminalId';
+    final alias = bind.mainGetPeerOptionSync(id: peerId, key: 'alias');
+    final tabLabel =
+        alias.isNotEmpty ? '$alias #$terminalId' : '$peerId #$terminalId';
+    return TabInfo(
+      key: tabKey,
+      label: tabLabel,
+      selectedIcon: selectedIcon,
+      unselectedIcon: unselectedIcon,
+      onTabCloseButton: () => _closeTab(tabKey),
+      page: TerminalPage(
+        key: ValueKey(tabKey),
+        id: peerId,
+        terminalId: terminalId,
+        tabKey: tabKey,
+        password: password,
+        isSharedPassword: isSharedPassword,
+        tabController: tabController,
+        forceRelay: forceRelay,
+        connToken: connToken,
+      ),
+    );
+  }
+
+  /// Unified tab close handler for all close paths (button, shortcut, programmatic).
+  /// Shows audit dialog, cleans up session if not persistent, then removes the UI tab.
+  Future<void> _closeTab(String tabKey) async {
+    // Idempotency guard: skip if already closing this tab
+    if (_closingTabs.contains(tabKey)) return;
+    _closingTabs.add(tabKey);
+
+    try {
+      // Snapshot peerTabCount BEFORE any await to avoid race with concurrent
+      // _closeAllTabs clearing tabController (which would make the live count
+      // drop to 0 and incorrectly trigger session persistence).
+      // Note: the snapshot may become stale if other individual tabs are closed
+      // during the audit dialog, but this is an acceptable trade-off.
+      int? snapshotPeerTabCount;
+      final parsed = _parseTabKey(tabKey);
+      if (parsed != null) {
+        final (peerId, _) = parsed;
+        snapshotPeerTabCount = tabController.state.value.tabs.where((t) {
+          final p = _parseTabKey(t.key);
+          return p != null && p.$1 == peerId;
+        }).length;
+      }
+
+      if (await desktopTryShowTabAuditDialogCloseCancelled(
+        id: tabKey,
+        tabController: tabController,
+      )) {
+        return;
+      }
+
+      // Close terminal session if not in persistent mode.
+      // Wrapped separately so session cleanup failure never blocks UI tab removal.
+      try {
+        await _closeTerminalSessionIfNeeded(tabKey,
+            peerTabCount: snapshotPeerTabCount);
+      } catch (e) {
+        debugPrint('[TerminalTabPage] Session cleanup failed for $tabKey: $e');
+      }
+      // Always close the tab from UI, regardless of session cleanup result
+      tabController.closeBy(tabKey);
+    } catch (e) {
+      debugPrint('[TerminalTabPage] Error closing tab $tabKey: $e');
+    } finally {
+      _closingTabs.remove(tabKey);
+    }
+  }
+
+  /// Close all tabs with session cleanup.
+  /// Used for window-level close operations (onDestroy, handleWindowCloseButton).
+  /// UI tabs are removed immediately; session cleanup runs in parallel with a
+  /// bounded timeout so window close is not blocked indefinitely.
+  Future<void> _closeAllTabs() async {
+    _windowClosing = true;
+    final tabKeys = tabController.state.value.tabs.map((t) => t.key).toList();
+    // Remove all UI tabs immediately (same instant behavior as the old tabController.clear())
+    // Keep the cleanup target lookup below synchronous before its first await:
+    // it relies on the current frame still retaining each TerminalPage's FFI/model.
+    tabController.clear();
+    // Run session cleanup in parallel with bounded timeout (closeTerminal() has internal 3s timeout).
+    // Skip tabs already being closed by a concurrent _closeTab() to avoid duplicate FFI calls.
+    final futures = tabKeys
+        .where((tabKey) => !_closingTabs.contains(tabKey))
+        .map((tabKey) async {
+      try {
+        await _closeTerminalSessionIfNeeded(tabKey, persistAll: true);
+      } catch (e) {
+        debugPrint('[TerminalTabPage] Session cleanup failed for $tabKey: $e');
+      }
+    }).toList();
+    if (futures.isNotEmpty) {
+      await Future.wait(futures).timeout(
+        const Duration(seconds: 4),
+        onTimeout: () {
+          debugPrint(
+              '[TerminalTabPage] Session cleanup timed out for batch close');
+          return [];
+        },
+      );
+    }
+  }
+
+  /// Close the terminal session on server side based on persistent mode.
+  ///
+  /// [persistAll] controls behavior when persistent mode is enabled:
+  /// - `true` (window close): persist all sessions, don't close any.
+  /// - `false` (tab close): only persist the last session for the peer,
+  ///   close others so only the most recent disconnected session survives.
+  ///
+  /// Note: if [_windowClosing] is true, persistAll is forced to true so that
+  /// in-flight _closeTab() calls don't accidentally close sessions that the
+  /// window-close flow intends to preserve.
+  Future<void> _closeTerminalSessionIfNeeded(String tabKey,
+      {bool persistAll = false, int? peerTabCount}) async {
+    // If window close is in progress, override to persist all sessions
+    // even if this call originated from an individual tab close.
+    if (_windowClosing) {
+      persistAll = true;
+    }
+    final parsed = _parseTabKey(tabKey);
+    if (parsed == null) return;
+    final (peerId, terminalId) = parsed;
+
+    final ffi = TerminalConnectionManager.getExistingConnection(peerId);
+    if (ffi == null) return;
+
+    final isPersistent = bind.sessionGetToggleOptionSync(
+      sessionId: ffi.sessionId,
+      arg: kOptionTerminalPersistent,
+    );
+
+    if (isPersistent) {
+      if (persistAll) {
+        // Window close: persist all sessions
+        return;
+      }
+      // Tab close: only persist if this is the last tab for this peer.
+      // Use the snapshot value if provided (avoids race with concurrent tab removal).
+      final effectivePeerTabCount = peerTabCount ??
+          tabController.state.value.tabs.where((t) {
+            final p = _parseTabKey(t.key);
+            return p != null && p.$1 == peerId;
+          }).length;
+      if (effectivePeerTabCount <= 1) {
+        // Last tab for this peer — persist the session
+        return;
+      }
+      // Not the last tab — fall through to close the session
+    }
+
+    final terminalModel = ffi.terminalModels[terminalId];
+    if (terminalModel != null) {
+      // closeTerminal() has internal 3s timeout, no need for external timeout
+      await terminalModel.closeTerminal();
+    }
+  }
+
+  /// Parse tabKey (format: "peerId_terminalId") into its components.
+  /// Note: peerId may contain underscores, so we use lastIndexOf('_').
+  /// Returns null if tabKey format is invalid.
+  (String peerId, int terminalId)? _parseTabKey(String tabKey) {
+    final lastUnderscore = tabKey.lastIndexOf('_');
+    if (lastUnderscore <= 0) {
+      debugPrint('[TerminalTabPage] Invalid tabKey format: $tabKey');
+      return null;
+    }
+    final terminalIdStr = tabKey.substring(lastUnderscore + 1);
+    final terminalId = int.tryParse(terminalIdStr);
+    if (terminalId == null) {
+      debugPrint('[TerminalTabPage] Invalid terminalId in tabKey: $tabKey');
+      return null;
+    }
+    final peerId = tabKey.substring(0, lastUnderscore);
+    return (peerId, terminalId);
+  }
+
+  Widget _tabMenuBuilder(String peerId, CancelFunc cancelFunc) {
+    final List<MenuEntryBase<String>> menu = [];
+    const EdgeInsets padding = EdgeInsets.only(left: 8.0, right: 5.0);
+
+    // New tab menu item
+    menu.add(MenuEntryButton<String>(
+      childBuilder: (TextStyle? style) => Text(
+        translate('New tab'),
+        style: style,
+      ),
+      proc: () {
+        _addNewTerminal(peerId);
+        cancelFunc();
+        // Also try to close any BotToast overlays
+        BotToast.cleanAll();
+      },
+      padding: padding,
+    ));
+
+    menu.add(MenuEntryDivider());
+
+    menu.add(MenuEntrySwitch<String>(
+      switchType: SwitchType.scheckbox,
+      text: translate('Keep terminal sessions on disconnect'),
+      getter: () async {
+        final ffi = Get.find<FFI>(tag: 'terminal_$peerId');
+        return bind.sessionGetToggleOptionSync(
+          sessionId: ffi.sessionId,
+          arg: kOptionTerminalPersistent,
+        );
+      },
+      setter: (bool v) async {
+        final ffi = Get.find<FFI>(tag: 'terminal_$peerId');
+        await bind.sessionToggleOption(
+          sessionId: ffi.sessionId,
+          value: kOptionTerminalPersistent,
+        );
+      },
+      padding: padding,
+    ));
+
+    return mod_menu.PopupMenu<String>(
+      items: menu
+          .map((e) => e.build(
+                context,
+                const MenuConfig(
+                  commonColor: CustomPopupMenuTheme.commonColor,
+                  height: CustomPopupMenuTheme.height,
+                  dividerHeight: CustomPopupMenuTheme.dividerHeight,
+                ),
+              ))
+          .expand((i) => i)
+          .toList(),
+    );
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    // Add keyboard shortcut handler
+    HardwareKeyboard.instance.addHandler(_handleKeyEvent);
+
+    rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
+      print(
+          "[Remote Terminal] call ${call.method} with args ${call.arguments} from window $fromWindowId");
+      if (call.method == kWindowEventNewTerminal) {
+        final args = jsonDecode(call.arguments);
+        final id = args['id'];
+        windowOnTop(windowId());
+        // Allow multiple terminals for the same connection
+        final terminalId = args['terminalId'] ?? _nextTerminalId++;
+        tabController.add(_createTerminalTab(
+          peerId: id,
+          terminalId: terminalId,
+          password: args['password'],
+          isSharedPassword: args['isSharedPassword'],
+          forceRelay: args['forceRelay'],
+          connToken: args['connToken'],
+        ));
+      } else if (call.method == kWindowEventRestoreTerminalSessions) {
+        _restoreSessions(call.arguments);
+      } else if (call.method == "onDestroy") {
+        // Clean up sessions before window destruction (bounded wait)
+        await _closeAllTabs();
+      } else if (call.method == kWindowActionRebuild) {
+        reloadCurrentWindow();
+      } else if (call.method == kWindowEventActiveSession) {
+        if (tabController.state.value.tabs.isEmpty) {
+          return false;
+        }
+        final currentTab = tabController.state.value.selectedTabInfo;
+        assert(call.arguments is String,
+            "Expected String arguments for kWindowEventActiveSession, got ${call.arguments.runtimeType}");
+        // Use lastIndexOf to handle peerIds containing underscores
+        final lastUnderscore = currentTab.key.lastIndexOf('_');
+        if (lastUnderscore > 0 &&
+            currentTab.key.substring(0, lastUnderscore) == call.arguments) {
+          windowOnTop(windowId());
+          return true;
+        }
+        return false;
+      }
+    });
+    Future.delayed(Duration.zero, () {
+      restoreWindowPosition(WindowType.Terminal, windowId: windowId());
+    });
+  }
+
+  @override
+  void dispose() {
+    HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
+    super.dispose();
+  }
+
+  Future<void> _restoreSessions(String arguments) async {
+    Map<String, dynamic>? args;
+    try {
+      args = jsonDecode(arguments) as Map<String, dynamic>;
+    } catch (e) {
+      debugPrint("Error parsing JSON arguments in _restoreSessions: $e");
+      return;
+    }
+    final persistentSessions =
+        args['persistent_sessions'] as List<dynamic>? ?? [];
+    final sortedSessions = persistentSessions.whereType<int>().toList()..sort();
+    var peerId = args['peer_id'] as String? ?? '';
+    if (peerId.isEmpty) {
+      if (tabController.state.value.tabs.isEmpty ||
+          tabController.state.value.selected >=
+              tabController.state.value.tabs.length) {
+        debugPrint('[TerminalTabPage] Skip restore: no selected tab');
+        return;
+      }
+      final currentTab = tabController.state.value.selectedTabInfo;
+      final parsed = _parseTabKey(currentTab.key);
+      if (parsed == null) return;
+      peerId = parsed.$1;
+    }
+    final existingTerminalIds = tabController.state.value.tabs
+        .map((tab) => _parseTabKey(tab.key))
+        .where((parsed) => parsed != null && parsed.$1 == peerId)
+        .map((parsed) => parsed!.$2)
+        .toSet();
+    if (existingTerminalIds.isEmpty) {
+      debugPrint(
+          '[TerminalTabPage] Skip restore: no seed tab for peer $peerId');
+      return;
+    }
+    for (final terminalId in sortedSessions) {
+      if (!existingTerminalIds.add(terminalId)) {
+        continue;
+      }
+      _addNewTerminal(peerId, terminalId: terminalId);
+      // A delay is required to ensure the UI has sufficient time to update
+      // before adding the next terminal. Without this delay, `_TerminalPageState::dispose()`
+      // may be called prematurely while the tab widget is still in the tab controller.
+      // This behavior is likely due to a race condition between the UI rendering lifecycle
+      // and the addition of new tabs. Attempts to use `_TerminalPageState::addPostFrameCallback()`
+      // to wait for the previous page to be ready were unsuccessful, as the observed call sequence is:
+      // `initState() 2 -> dispose() 2 -> postFrameCallback() 2`, followed by `initState() 3`.
+      // The `Future.delayed` approach mitigates this issue by introducing a buffer period,
+      // allowing the UI to stabilize before proceeding.
+      await Future.delayed(const Duration(milliseconds: 300));
+    }
+  }
+
+  bool _handleKeyEvent(KeyEvent event) {
+    if (event is KeyDownEvent) {
+      // Use Cmd+T on macOS, Ctrl+Shift+T on other platforms
+      if (event.logicalKey == LogicalKeyboardKey.keyT) {
+        if (isMacOS &&
+            HardwareKeyboard.instance.isMetaPressed &&
+            !HardwareKeyboard.instance.isShiftPressed) {
+          // macOS: Cmd+T (standard for new tab)
+          _addNewTerminalForCurrentPeer();
+          return true;
+        } else if (!isMacOS &&
+            HardwareKeyboard.instance.isControlPressed &&
+            HardwareKeyboard.instance.isShiftPressed) {
+          // Other platforms: Ctrl+Shift+T (to avoid conflict with Ctrl+T in terminal)
+          _addNewTerminalForCurrentPeer();
+          return true;
+        }
+      }
+
+      // Use Cmd+W on macOS, Ctrl+Shift+W on other platforms
+      if (event.logicalKey == LogicalKeyboardKey.keyW) {
+        if (isMacOS &&
+            HardwareKeyboard.instance.isMetaPressed &&
+            !HardwareKeyboard.instance.isShiftPressed) {
+          // macOS: Cmd+W (standard for close tab)
+          final currentTab = tabController.state.value.selectedTabInfo;
+          if (tabController.state.value.tabs.length > 1) {
+            _closeTab(currentTab.key);
+            return true;
+          }
+        } else if (!isMacOS &&
+            HardwareKeyboard.instance.isControlPressed &&
+            HardwareKeyboard.instance.isShiftPressed) {
+          // Other platforms: Ctrl+Shift+W (to avoid conflict with Ctrl+W word delete)
+          final currentTab = tabController.state.value.selectedTabInfo;
+          if (tabController.state.value.tabs.length > 1) {
+            _closeTab(currentTab.key);
+            return true;
+          }
+        }
+      }
+
+      // Use Alt+Left/Right for tab navigation (avoids conflicts)
+      if (HardwareKeyboard.instance.isAltPressed) {
+        if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
+          // Previous tab
+          final currentIndex = tabController.state.value.selected;
+          if (currentIndex > 0) {
+            tabController.jumpTo(currentIndex - 1);
+          }
+          return true;
+        } else if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
+          // Next tab
+          final currentIndex = tabController.state.value.selected;
+          if (currentIndex < tabController.length - 1) {
+            tabController.jumpTo(currentIndex + 1);
+          }
+          return true;
+        }
+      }
+
+      // Check for Cmd/Ctrl + Number (switch to specific tab)
+      final numberKeys = [
+        LogicalKeyboardKey.digit1,
+        LogicalKeyboardKey.digit2,
+        LogicalKeyboardKey.digit3,
+        LogicalKeyboardKey.digit4,
+        LogicalKeyboardKey.digit5,
+        LogicalKeyboardKey.digit6,
+        LogicalKeyboardKey.digit7,
+        LogicalKeyboardKey.digit8,
+        LogicalKeyboardKey.digit9,
+      ];
+
+      for (int i = 0; i < numberKeys.length; i++) {
+        if (event.logicalKey == numberKeys[i] &&
+            ((isMacOS && HardwareKeyboard.instance.isMetaPressed) ||
+                (!isMacOS && HardwareKeyboard.instance.isControlPressed))) {
+          if (i < tabController.length) {
+            tabController.jumpTo(i);
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+
+  void _addNewTerminal(String peerId, {int? terminalId}) {
+    // Find first tab for this peer to get connection parameters
+    final firstTab = tabController.state.value.tabs.firstWhere(
+      (tab) {
+        final last = tab.key.lastIndexOf('_');
+        return last > 0 && tab.key.substring(0, last) == peerId;
+      },
+    );
+    if (firstTab.page is TerminalPage) {
+      final page = firstTab.page as TerminalPage;
+      final newTerminalId = terminalId ?? _nextTerminalId++;
+      if (terminalId != null && terminalId >= _nextTerminalId) {
+        _nextTerminalId = terminalId + 1;
+      }
+      tabController.add(_createTerminalTab(
+        peerId: peerId,
+        terminalId: newTerminalId,
+        password: page.password,
+        isSharedPassword: page.isSharedPassword,
+        forceRelay: page.forceRelay,
+        connToken: page.connToken,
+      ));
+    }
+  }
+
+  void _addNewTerminalForCurrentPeer({int? terminalId}) {
+    final currentTab = tabController.state.value.selectedTabInfo;
+    final parsed = _parseTabKey(currentTab.key);
+    if (parsed == null) return;
+    final (peerId, _) = parsed;
+    _addNewTerminal(peerId, terminalId: terminalId);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final child = Scaffold(
+        backgroundColor: Theme.of(context).cardColor,
+        body: DesktopTab(
+          controller: tabController,
+          onWindowCloseButton: handleWindowCloseButton,
+          tail: _buildAddButton(),
+          selectedBorderColor: MyTheme.accent,
+          labelGetter: DesktopTab.tablabelGetter,
+          tabMenuBuilder: (key) {
+            final parsed = _parseTabKey(key);
+            if (parsed == null) return Container();
+            final (peerId, _) = parsed;
+            return _tabMenuBuilder(peerId, () {});
+          },
+        ));
+    final tabWidget = isLinux
+        ? buildVirtualWindowFrame(context, child)
+        : workaroundWindowBorder(
+            context,
+            Container(
+              decoration: BoxDecoration(
+                  border: Border.all(color: MyTheme.color(context).border!)),
+              child: child,
+            ));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : SubWindowDragToResizeArea(
+            child: tabWidget,
+            resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+            enableResizeEdges: subWindowManagerEnableResizeEdges,
+            windowId: stateGlobal.windowId,
+          );
+  }
+
+  void onRemoveId(String id) {
+    if (tabController.state.value.tabs.isEmpty) {
+      WindowController.fromWindowId(windowId()).close();
+    }
+  }
+
+  Future<void> _closeWindowFromConnection() async {
+    await _closeAllTabs();
+    await WindowController.fromWindowId(windowId()).close();
+  }
+
+  int windowId() {
+    return widget.params["windowId"];
+  }
+
+  Widget _buildAddButton() {
+    return ActionIcon(
+      message: 'New tab',
+      icon: IconFont.add,
+      onTap: () {
+        _addNewTerminalForCurrentPeer();
+      },
+      isClose: false,
+    );
+  }
+
+  Future<bool> handleWindowCloseButton() async {
+    final connLength = tabController.state.value.tabs.length;
+    if (connLength == 1) {
+      if (await desktopTryShowTabAuditDialogCloseCancelled(
+        id: tabController.state.value.tabs[0].key,
+        tabController: tabController,
+      )) {
+        return false;
+      }
+    }
+    if (connLength <= 1) {
+      await _closeAllTabs();
+      return true;
+    } else {
+      final bool res;
+      if (!option2bool(kOptionEnableConfirmClosingTabs,
+          bind.mainGetLocalOption(key: kOptionEnableConfirmClosingTabs))) {
+        res = true;
+      } else {
+        res = await closeConfirmDialog();
+      }
+      if (res) {
+        await _closeAllTabs();
+      }
+      return res;
+    }
+  }
+}

flutter/lib/desktop/pages/view_camera_page.dart

@@ -0,0 +1,717 @@
+import 'dart:async';
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hbb/common/widgets/remote_input.dart';
+import 'package:get/get.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+
+import '../../consts.dart';
+import '../../common/widgets/overlay.dart';
+import '../../common.dart';
+import '../../common/widgets/dialog.dart';
+import '../../common/widgets/toolbar.dart';
+import '../../models/model.dart';
+import '../../models/platform_model.dart';
+import '../../common/shared_state.dart';
+import '../../utils/image.dart';
+import '../widgets/remote_toolbar.dart';
+import '../widgets/kb_layout_type_chooser.dart';
+import '../widgets/tabbar_widget.dart';
+
+import 'package:flutter_hbb/native/custom_cursor.dart'
+    if (dart.library.html) 'package:flutter_hbb/web/custom_cursor.dart';
+
+final SimpleWrapper<bool> _firstEnterImage = SimpleWrapper(false);
+
+// Used to skip session close if "move to new window" is clicked.
+final Map<String, bool> closeSessionOnDispose = {};
+
+class ViewCameraPage extends StatefulWidget {
+  ViewCameraPage({
+    Key? key,
+    required this.id,
+    required this.toolbarState,
+    this.sessionId,
+    this.tabWindowId,
+    this.password,
+    this.display,
+    this.displays,
+    this.tabController,
+    this.connToken,
+    this.forceRelay,
+    this.isSharedPassword,
+  }) : super(key: key) {
+    initSharedStates(id);
+  }
+
+  final String id;
+  final SessionID? sessionId;
+  final int? tabWindowId;
+  final int? display;
+  final List<int>? displays;
+  final String? password;
+  final ToolbarState toolbarState;
+  final bool? forceRelay;
+  final bool? isSharedPassword;
+  final String? connToken;
+  final SimpleWrapper<State<ViewCameraPage>?> _lastState = SimpleWrapper(null);
+  final DesktopTabController? tabController;
+
+  FFI get ffi => (_lastState.value! as _ViewCameraPageState)._ffi;
+
+  @override
+  State<ViewCameraPage> createState() {
+    final state = _ViewCameraPageState(id);
+    _lastState.value = state;
+    return state;
+  }
+}
+
+class _ViewCameraPageState extends State<ViewCameraPage>
+    with AutomaticKeepAliveClientMixin, MultiWindowListener {
+  Timer? _timer;
+  String keyboardMode = "legacy";
+  bool _isWindowBlur = false;
+  final _cursorOverImage = false.obs;
+  final _uniqueKey = UniqueKey();
+
+  var _blockableOverlayState = BlockableOverlayState();
+
+  final FocusNode _rawKeyFocusNode = FocusNode(debugLabel: "rawkeyFocusNode");
+
+  // We need `_instanceIdOnEnterOrLeaveImage4Toolbar` together with `_onEnterOrLeaveImage4Toolbar`
+  // to identify the toolbar instance and its callback function.
+  int? _instanceIdOnEnterOrLeaveImage4Toolbar;
+  Function(bool)? _onEnterOrLeaveImage4Toolbar;
+
+  late FFI _ffi;
+
+  SessionID get sessionId => _ffi.sessionId;
+
+  _ViewCameraPageState(String id) {
+    _initStates(id);
+  }
+
+  void _initStates(String id) {}
+
+  @override
+  void initState() {
+    super.initState();
+    _ffi = FFI(widget.sessionId);
+    Get.put<FFI>(_ffi, tag: widget.id);
+    _ffi.imageModel.addCallbackOnFirstImage((String peerId) {
+      showKBLayoutTypeChooserIfNeeded(
+          _ffi.ffiModel.pi.platform, _ffi.dialogManager);
+      _ffi.recordingModel
+          .updateStatus(bind.sessionGetIsRecording(sessionId: _ffi.sessionId));
+    });
+    _ffi.start(
+      widget.id,
+      isViewCamera: true,
+      password: widget.password,
+      isSharedPassword: widget.isSharedPassword,
+      forceRelay: widget.forceRelay,
+      tabWindowId: widget.tabWindowId,
+      display: widget.display,
+      displays: widget.displays,
+      connToken: widget.connToken,
+    );
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
+      _ffi.dialogManager
+          .showLoading(translate('Connecting...'), onCancel: closeConnection);
+    });
+    WakelockManager.enable(_uniqueKey);
+
+    _ffi.ffiModel.updateEventListener(sessionId, widget.id);
+    if (!isWeb) bind.pluginSyncUi(syncTo: kAppTypeDesktopRemote);
+    _ffi.qualityMonitorModel.checkShowQualityMonitor(sessionId);
+    _ffi.dialogManager.loadMobileActionsOverlayVisible();
+    DesktopMultiWindow.addListener(this);
+    // if (!_isCustomCursorInited) {
+    //   customCursorController.registerNeedUpdateCursorCallback(
+    //       (String? lastKey, String? currentKey) async {
+    //     if (_firstEnterImage.value) {
+    //       _firstEnterImage.value = false;
+    //       return true;
+    //     }
+    //     return lastKey == null || lastKey != currentKey;
+    //   });
+    //   _isCustomCursorInited = true;
+    // }
+
+    _blockableOverlayState.applyFfi(_ffi);
+    // Call onSelected in post frame callback, since we cannot guarantee that the callback will not call setState.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      widget.tabController?.onSelected?.call(widget.id);
+    });
+  }
+
+  @override
+  void onWindowBlur() {
+    super.onWindowBlur();
+    // On windows, we use `focus` way to handle keyboard better.
+    // Now on Linux, there's some rdev issues which will break the input.
+    // We disable the `focus` way for non-Windows temporarily.
+    if (isWindows) {
+      _isWindowBlur = true;
+      // unfocus the primary-focus when the whole window is lost focus,
+      // and let OS to handle events instead.
+      _rawKeyFocusNode.unfocus();
+    }
+    stateGlobal.isFocused.value = false;
+  }
+
+  @override
+  void onWindowFocus() {
+    super.onWindowFocus();
+    // See [onWindowBlur].
+    if (isWindows) {
+      _isWindowBlur = false;
+    }
+    stateGlobal.isFocused.value = true;
+  }
+
+  @override
+  void onWindowRestore() {
+    super.onWindowRestore();
+    // On windows, we use `onWindowRestore` way to handle window restore from
+    // a minimized state.
+    if (isWindows) {
+      _isWindowBlur = false;
+    }
+    WakelockManager.enable(_uniqueKey);
+  }
+
+  // When the window is unminimized, onWindowMaximize or onWindowRestore can be called when the old state was maximized or not.
+  @override
+  void onWindowMaximize() {
+    super.onWindowMaximize();
+    WakelockManager.enable(_uniqueKey);
+  }
+
+  @override
+  void onWindowMinimize() {
+    super.onWindowMinimize();
+    WakelockManager.disable(_uniqueKey);
+  }
+
+  @override
+  void onWindowEnterFullScreen() {
+    super.onWindowEnterFullScreen();
+    if (isMacOS) {
+      stateGlobal.setFullscreen(true);
+    }
+  }
+
+  @override
+  void onWindowLeaveFullScreen() {
+    super.onWindowLeaveFullScreen();
+    if (isMacOS) {
+      stateGlobal.setFullscreen(false);
+    }
+  }
+
+  @override
+  Future<void> dispose() async {
+    final closeSession = closeSessionOnDispose.remove(widget.id) ?? true;
+
+    // https://github.com/flutter/flutter/issues/64935
+    super.dispose();
+    debugPrint("VIEW CAMERA PAGE dispose session $sessionId ${widget.id}");
+    _ffi.textureModel.onViewCameraPageDispose(closeSession);
+    if (closeSession) {
+      // ensure we leave this session, this is a double check
+      _ffi.inputModel.enterOrLeave(false);
+    }
+    DesktopMultiWindow.removeListener(this);
+    _ffi.dialogManager.hideMobileActionsOverlay();
+    _ffi.imageModel.disposeImage();
+    _ffi.cursorModel.disposeImages();
+    _rawKeyFocusNode.dispose();
+    await _ffi.close(closeSession: closeSession);
+    _timer?.cancel();
+    _ffi.dialogManager.dismissAll();
+    if (closeSession) {
+      await SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
+          overlays: SystemUiOverlay.values);
+    }
+    WakelockManager.disable(_uniqueKey);
+    await Get.delete<FFI>(tag: widget.id);
+    removeSharedStates(widget.id);
+  }
+
+  Widget emptyOverlay() => BlockableOverlay(
+        /// the Overlay key will be set with _blockableOverlayState in BlockableOverlay
+        /// see override build() in [BlockableOverlay]
+        state: _blockableOverlayState,
+        underlying: Container(
+          color: Colors.transparent,
+        ),
+      );
+
+  Widget buildBody(BuildContext context) {
+    remoteToolbar(BuildContext context) => RemoteToolbar(
+          id: widget.id,
+          ffi: _ffi,
+          state: widget.toolbarState,
+          onEnterOrLeaveImageSetter: (id, func) {
+            _instanceIdOnEnterOrLeaveImage4Toolbar = id;
+            _onEnterOrLeaveImage4Toolbar = func;
+          },
+          onEnterOrLeaveImageCleaner: (id) {
+            // If _instanceIdOnEnterOrLeaveImage4Toolbar != id
+            // it means `_onEnterOrLeaveImage4Toolbar` is not set or it has been changed to another toolbar.
+            if (_instanceIdOnEnterOrLeaveImage4Toolbar == id) {
+              _instanceIdOnEnterOrLeaveImage4Toolbar = null;
+              _onEnterOrLeaveImage4Toolbar = null;
+            }
+          },
+          setRemoteState: setState,
+        );
+
+    bodyWidget() {
+      return Stack(
+        children: [
+          Container(
+            color: kColorCanvas,
+            child: getBodyForDesktop(context),
+          ),
+          Stack(
+            children: [
+              _ffi.ffiModel.pi.isSet.isTrue &&
+                      _ffi.ffiModel.waitForFirstImage.isTrue
+                  ? emptyOverlay()
+                  : () {
+                      if (!_ffi.ffiModel.isPeerAndroid) {
+                        return Offstage();
+                      } else {
+                        return Obx(() => Offstage(
+                              offstage: _ffi.dialogManager
+                                  .mobileActionsOverlayVisible.isFalse,
+                              child: Overlay(initialEntries: [
+                                makeMobileActionsOverlayEntry(
+                                  () => _ffi.dialogManager
+                                      .setMobileActionsOverlayVisible(false),
+                                  ffi: _ffi,
+                                )
+                              ]),
+                            ));
+                      }
+                    }(),
+              // Use Overlay to enable rebuild every time on menu button click.
+              _ffi.ffiModel.pi.isSet.isTrue
+                  ? Overlay(
+                      initialEntries: [OverlayEntry(builder: remoteToolbar)])
+                  : remoteToolbar(context),
+              _ffi.ffiModel.pi.isSet.isFalse ? emptyOverlay() : Offstage(),
+            ],
+          ),
+        ],
+      );
+    }
+
+    return Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: Obx(() {
+        final imageReady = _ffi.ffiModel.pi.isSet.isTrue &&
+            _ffi.ffiModel.waitForFirstImage.isFalse;
+        if (imageReady) {
+          // If the privacy mode(disable physical displays) is switched,
+          // we should not dismiss the dialog immediately.
+          if (DateTime.now().difference(togglePrivacyModeTime) >
+              const Duration(milliseconds: 3000)) {
+            // `dismissAll()` is to ensure that the state is clean.
+            // It's ok to call dismissAll() here.
+            _ffi.dialogManager.dismissAll();
+            // Recreate the block state to refresh the state.
+            _blockableOverlayState = BlockableOverlayState();
+            _blockableOverlayState.applyFfi(_ffi);
+          }
+          // Block the whole `bodyWidget()` when dialog shows.
+          return BlockableOverlay(
+            underlying: bodyWidget(),
+            state: _blockableOverlayState,
+          );
+        } else {
+          // `_blockableOverlayState` is not recreated here.
+          // The toolbar's block state won't work properly when reconnecting, but that's okay.
+          return bodyWidget();
+        }
+      }),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return WillPopScope(
+        onWillPop: () async {
+          clientClose(sessionId, _ffi);
+          return false;
+        },
+        child: MultiProvider(providers: [
+          ChangeNotifierProvider.value(value: _ffi.ffiModel),
+          ChangeNotifierProvider.value(value: _ffi.imageModel),
+          ChangeNotifierProvider.value(value: _ffi.cursorModel),
+          ChangeNotifierProvider.value(value: _ffi.canvasModel),
+          ChangeNotifierProvider.value(value: _ffi.recordingModel),
+        ], child: buildBody(context)));
+  }
+
+  void enterView(PointerEnterEvent evt) {
+    _cursorOverImage.value = true;
+    _firstEnterImage.value = true;
+    if (_onEnterOrLeaveImage4Toolbar != null) {
+      try {
+        _onEnterOrLeaveImage4Toolbar!(true);
+      } catch (e) {
+        //
+      }
+    }
+    // See [onWindowBlur].
+    if (!isWindows) {
+      if (!_rawKeyFocusNode.hasFocus) {
+        _rawKeyFocusNode.requestFocus();
+      }
+      _ffi.inputModel.enterOrLeave(true);
+    }
+  }
+
+  void leaveView(PointerExitEvent evt) {
+    if (_ffi.ffiModel.keyboard) {
+      _ffi.inputModel.tryMoveEdgeOnExit(evt.position);
+    }
+
+    _cursorOverImage.value = false;
+    _firstEnterImage.value = false;
+    if (_onEnterOrLeaveImage4Toolbar != null) {
+      try {
+        _onEnterOrLeaveImage4Toolbar!(false);
+      } catch (e) {
+        //
+      }
+    }
+    // See [onWindowBlur].
+    if (!isWindows) {
+      _ffi.inputModel.enterOrLeave(false);
+    }
+  }
+
+  Widget _buildRawTouchAndPointerRegion(
+    Widget child,
+    PointerEnterEventListener? onEnter,
+    PointerExitEventListener? onExit,
+  ) {
+    return RawTouchGestureDetectorRegion(
+      child: _buildRawPointerMouseRegion(child, onEnter, onExit),
+      ffi: _ffi,
+      isCamera: true,
+    );
+  }
+
+  Widget _buildRawPointerMouseRegion(
+    Widget child,
+    PointerEnterEventListener? onEnter,
+    PointerExitEventListener? onExit,
+  ) {
+    return CameraRawPointerMouseRegion(
+      onEnter: onEnter,
+      onExit: onExit,
+      onPointerDown: (event) {
+        // A double check for blur status.
+        // Note: If there's an `onPointerDown` event is triggered, `_isWindowBlur` is expected being false.
+        // Sometimes the system does not send the necessary focus event to flutter. We should manually
+        // handle this inconsistent status by setting `_isWindowBlur` to false. So we can
+        // ensure the grab-key thread is running when our users are clicking the remote canvas.
+        if (_isWindowBlur) {
+          debugPrint(
+              "Unexpected status: onPointerDown is triggered while the remote window is in blur status");
+          _isWindowBlur = false;
+        }
+        if (!_rawKeyFocusNode.hasFocus) {
+          _rawKeyFocusNode.requestFocus();
+        }
+      },
+      inputModel: _ffi.inputModel,
+      child: child,
+    );
+  }
+
+  Widget getBodyForDesktop(BuildContext context) {
+    var paints = <Widget>[
+      MouseRegion(onEnter: (evt) {
+        if (!isWeb) bind.hostStopSystemKeyPropagate(stopped: false);
+      }, onExit: (evt) {
+        if (!isWeb) bind.hostStopSystemKeyPropagate(stopped: true);
+      }, child: LayoutBuilder(builder: (context, constraints) {
+        final c = Provider.of<CanvasModel>(context, listen: false);
+        Future.delayed(Duration.zero, () => c.updateViewStyle());
+        final peerDisplay = CurrentDisplayState.find(widget.id);
+        return Obx(
+          () => _ffi.ffiModel.pi.isSet.isFalse
+              ? Container(color: Colors.transparent)
+              : Obx(() {
+                  _ffi.textureModel.updateCurrentDisplay(peerDisplay.value);
+                  return ImagePaint(
+                    id: widget.id,
+                    cursorOverImage: _cursorOverImage,
+                    listenerBuilder: (child) => _buildRawTouchAndPointerRegion(
+                        child, enterView, leaveView),
+                    ffi: _ffi,
+                  );
+                }),
+        );
+      }))
+    ];
+
+    paints.add(
+      Positioned(
+        top: 10,
+        right: 10,
+        child: _buildRawTouchAndPointerRegion(
+            QualityMonitor(_ffi.qualityMonitorModel), null, null),
+      ),
+    );
+    return Stack(
+      children: paints,
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}
+
+class ImagePaint extends StatefulWidget {
+  final FFI ffi;
+  final String id;
+  final RxBool cursorOverImage;
+  final Widget Function(Widget)? listenerBuilder;
+
+  ImagePaint(
+      {Key? key,
+      required this.ffi,
+      required this.id,
+      required this.cursorOverImage,
+      this.listenerBuilder})
+      : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _ImagePaintState();
+}
+
+class _ImagePaintState extends State<ImagePaint> {
+  String get id => widget.id;
+  RxBool get cursorOverImage => widget.cursorOverImage;
+  Widget Function(Widget)? get listenerBuilder => widget.listenerBuilder;
+
+  @override
+  Widget build(BuildContext context) {
+    final m = Provider.of<ImageModel>(context);
+    var c = Provider.of<CanvasModel>(context);
+    final s = c.scale;
+
+    bool isViewOriginal() => c.viewStyle.style == kRemoteViewStyleOriginal;
+
+    if (c.imageOverflow.isTrue && c.scrollStyle != ScrollStyle.scrollauto) {
+      final paintWidth = c.getDisplayWidth() * s;
+      final paintHeight = c.getDisplayHeight() * s;
+      final paintSize = Size(paintWidth, paintHeight);
+      final paintWidget =
+          m.useTextureRender || widget.ffi.ffiModel.pi.forceTextureRender
+              ? _BuildPaintTextureRender(
+                  c, s, Offset.zero, paintSize, isViewOriginal())
+              : _buildScrollbarNonTextureRender(m, paintSize, s);
+      return NotificationListener<ScrollNotification>(
+        onNotification: (notification) {
+          c.updateScrollPercent();
+          return false;
+        },
+        child: Container(
+            child: _buildCrossScrollbarFromLayout(
+          context,
+          _buildListener(paintWidget),
+          c.size,
+          paintSize,
+          c.scrollHorizontal,
+          c.scrollVertical,
+        )),
+      );
+    } else {
+      if (c.size.width > 0 && c.size.height > 0) {
+        final paintWidget =
+            m.useTextureRender || widget.ffi.ffiModel.pi.forceTextureRender
+                ? _BuildPaintTextureRender(
+                    c,
+                    s,
+                    Offset(
+                      isLinux ? c.x.toInt().toDouble() : c.x,
+                      isLinux ? c.y.toInt().toDouble() : c.y,
+                    ),
+                    c.size,
+                    isViewOriginal())
+                : _buildScrollAutoNonTextureRender(m, c, s);
+        return Container(child: _buildListener(paintWidget));
+      } else {
+        return Container();
+      }
+    }
+  }
+
+  Widget _buildScrollbarNonTextureRender(
+      ImageModel m, Size imageSize, double s) {
+    return CustomPaint(
+      size: imageSize,
+      painter: ImagePainter(image: m.image, x: 0, y: 0, scale: s),
+    );
+  }
+
+  Widget _buildScrollAutoNonTextureRender(
+      ImageModel m, CanvasModel c, double s) {
+    return CustomPaint(
+      size: Size(c.size.width, c.size.height),
+      painter: ImagePainter(image: m.image, x: c.x / s, y: c.y / s, scale: s),
+    );
+  }
+
+  Widget _BuildPaintTextureRender(
+      CanvasModel c, double s, Offset offset, Size size, bool isViewOriginal) {
+    final ffiModel = c.parent.target!.ffiModel;
+    final displays = ffiModel.pi.getCurDisplays();
+    final children = <Widget>[];
+    final rect = ffiModel.rect;
+    if (rect == null) {
+      return Container();
+    }
+    final curDisplay = ffiModel.pi.currentDisplay;
+    for (var i = 0; i < displays.length; i++) {
+      final textureId = widget.ffi.textureModel
+          .getTextureId(curDisplay == kAllDisplayValue ? i : curDisplay);
+      if (true) {
+        // both "textureId.value != -1" and "true" seems ok
+        children.add(Positioned(
+          left: (displays[i].x - rect.left) * s + offset.dx,
+          top: (displays[i].y - rect.top) * s + offset.dy,
+          width: displays[i].width * s,
+          height: displays[i].height * s,
+          child: Obx(() => Texture(
+                textureId: textureId.value,
+                filterQuality:
+                    isViewOriginal ? FilterQuality.none : FilterQuality.low,
+              )),
+        ));
+      }
+    }
+    return SizedBox(
+      width: size.width,
+      height: size.height,
+      child: Stack(children: children),
+    );
+  }
+
+  MouseCursor _buildCustomCursor(BuildContext context, double scale) {
+    final cursor = Provider.of<CursorModel>(context);
+    final cache = cursor.cache ?? preDefaultCursor.cache;
+    return buildCursorOfCache(cursor, scale, cache);
+  }
+
+  MouseCursor _buildDisabledCursor(BuildContext context, double scale) {
+    final cursor = Provider.of<CursorModel>(context);
+    final cache = preForbiddenCursor.cache;
+    return buildCursorOfCache(cursor, scale, cache);
+  }
+
+  Widget _buildCrossScrollbarFromLayout(
+    BuildContext context,
+    Widget child,
+    Size layoutSize,
+    Size size,
+    ScrollController horizontal,
+    ScrollController vertical,
+  ) {
+    var widget = child;
+    if (layoutSize.width < size.width) {
+      widget = ScrollConfiguration(
+        behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+        child: SingleChildScrollView(
+          controller: horizontal,
+          scrollDirection: Axis.horizontal,
+          physics: cursorOverImage.isTrue
+              ? const NeverScrollableScrollPhysics()
+              : null,
+          child: widget,
+        ),
+      );
+    } else {
+      widget = Row(
+        children: [
+          Container(
+            width: ((layoutSize.width - size.width) ~/ 2).toDouble(),
+          ),
+          widget,
+        ],
+      );
+    }
+    if (layoutSize.height < size.height) {
+      widget = ScrollConfiguration(
+        behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+        child: SingleChildScrollView(
+          controller: vertical,
+          physics: cursorOverImage.isTrue
+              ? const NeverScrollableScrollPhysics()
+              : null,
+          child: widget,
+        ),
+      );
+    } else {
+      widget = Column(
+        children: [
+          Container(
+            height: ((layoutSize.height - size.height) ~/ 2).toDouble(),
+          ),
+          widget,
+        ],
+      );
+    }
+    if (layoutSize.width < size.width) {
+      widget = RawScrollbar(
+        thickness: kScrollbarThickness,
+        thumbColor: Colors.grey,
+        controller: horizontal,
+        thumbVisibility: false,
+        trackVisibility: false,
+        notificationPredicate: layoutSize.height < size.height
+            ? (notification) => notification.depth == 1
+            : defaultScrollNotificationPredicate,
+        child: widget,
+      );
+    }
+    if (layoutSize.height < size.height) {
+      widget = RawScrollbar(
+        thickness: kScrollbarThickness,
+        thumbColor: Colors.grey,
+        controller: vertical,
+        thumbVisibility: false,
+        trackVisibility: false,
+        child: widget,
+      );
+    }
+
+    return Container(
+      child: widget,
+      width: layoutSize.width,
+      height: layoutSize.height,
+    );
+  }
+
+  Widget _buildListener(Widget child) {
+    if (listenerBuilder != null) {
+      return listenerBuilder!(child);
+    } else {
+      return child;
+    }
+  }
+}

flutter/lib/desktop/pages/view_camera_tab_page.dart

@@ -0,0 +1,522 @@
+import 'dart:convert';
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:desktop_multi_window/desktop_multi_window.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/common/shared_state.dart';
+import 'package:flutter_hbb/common/widgets/dialog.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/models/input_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:flutter_hbb/desktop/pages/view_camera_page.dart';
+import 'package:flutter_hbb/desktop/widgets/remote_toolbar.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/desktop/widgets/material_mod_popup_menu.dart'
+    as mod_menu;
+import 'package:flutter_hbb/desktop/widgets/popup_menu.dart';
+import 'package:flutter_hbb/utils/multi_window_manager.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:bot_toast/bot_toast.dart';
+
+import '../../models/platform_model.dart';
+
+class _MenuTheme {
+  static const Color blueColor = MyTheme.button;
+  // kMinInteractiveDimension
+  static const double height = 20.0;
+  static const double dividerHeight = 12.0;
+}
+
+class ViewCameraTabPage extends StatefulWidget {
+  final Map<String, dynamic> params;
+
+  const ViewCameraTabPage({Key? key, required this.params}) : super(key: key);
+
+  @override
+  State<ViewCameraTabPage> createState() => _ViewCameraTabPageState(params);
+}
+
+class _ViewCameraTabPageState extends State<ViewCameraTabPage> {
+  final tabController =
+      Get.put(DesktopTabController(tabType: DesktopTabType.viewCamera));
+  final contentKey = UniqueKey();
+  static const IconData selectedIcon = Icons.desktop_windows_sharp;
+  static const IconData unselectedIcon = Icons.desktop_windows_outlined;
+
+  String? peerId;
+  bool _isScreenRectSet = false;
+  int? _display;
+
+  var connectionMap = RxList<Widget>.empty(growable: true);
+
+  _ViewCameraTabPageState(Map<String, dynamic> params) {
+    RemoteCountState.init();
+    peerId = params['id'];
+    final sessionId = params['session_id'];
+    final tabWindowId = params['tab_window_id'];
+    final display = params['display'];
+    final displays = params['displays'];
+    final screenRect = parseParamScreenRect(params);
+    _isScreenRectSet = screenRect != null;
+    _display = display as int?;
+    tryMoveToScreenAndSetFullscreen(screenRect);
+    if (peerId != null) {
+      ConnectionTypeState.init(peerId!);
+      tabController.onSelected = (id) {
+        final viewCameraPage = tabController.widget(id);
+        if (viewCameraPage is ViewCameraPage) {
+          final ffi = viewCameraPage.ffi;
+          bind.setCurSessionId(sessionId: ffi.sessionId);
+        }
+        WindowController.fromWindowId(params['windowId'])
+            .setTitle(getWindowNameWithId(id));
+        UnreadChatCountState.find(id).value = 0;
+      };
+      tabController.add(TabInfo(
+        key: peerId!,
+        label: peerId!,
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        onTabCloseButton: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: peerId!,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(peerId!);
+        },
+        page: ViewCameraPage(
+          key: ValueKey(peerId),
+          id: peerId!,
+          sessionId: sessionId == null ? null : SessionID(sessionId),
+          tabWindowId: tabWindowId,
+          display: display,
+          displays: displays?.cast<int>(),
+          password: params['password'],
+          toolbarState: ToolbarState(),
+          tabController: tabController,
+          connToken: params['connToken'],
+          forceRelay: params['forceRelay'],
+          isSharedPassword: params['isSharedPassword'],
+        ),
+      ));
+      _update_remote_count();
+    }
+    tabController.onRemoved = (_, id) => onRemoveId(id);
+    rustDeskWinManager.setMethodHandler(_remoteMethodHandler);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (!_isScreenRectSet) {
+      Future.delayed(Duration.zero, () {
+        restoreWindowPosition(
+          WindowType.ViewCamera,
+          windowId: windowId(),
+          peerId: tabController.state.value.tabs.isEmpty
+              ? null
+              : tabController.state.value.tabs[0].key,
+          display: _display,
+        );
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final child = Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: DesktopTab(
+        controller: tabController,
+        onWindowCloseButton: handleWindowCloseButton,
+        tail: const AddButton(),
+        selectedBorderColor: MyTheme.accent,
+        pageViewBuilder: (pageView) => pageView,
+        labelGetter: DesktopTab.tablabelGetter,
+        tabBuilder: (key, icon, label, themeConf) => Obx(() {
+          final connectionType = ConnectionTypeState.find(key);
+          if (!connectionType.isValid()) {
+            return Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                icon,
+                label,
+              ],
+            );
+          } else {
+            bool secure =
+                connectionType.secure.value == ConnectionType.strSecure;
+            bool direct =
+                connectionType.direct.value == ConnectionType.strDirect;
+            String msgConn = getConnectionText(
+                secure, direct, connectionType.stream_type.value);
+            var msgFingerprint = '${translate('Fingerprint')}:\n';
+            var fingerprint = FingerprintState.find(key).value;
+            if (fingerprint.isEmpty) {
+              fingerprint = 'N/A';
+            }
+            if (fingerprint.length > 5 * 8) {
+              var first = fingerprint.substring(0, 39);
+              var second = fingerprint.substring(40);
+              msgFingerprint += '$first\n$second';
+            } else {
+              msgFingerprint += fingerprint;
+            }
+
+            final tab = Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                icon,
+                Tooltip(
+                  message: '$msgConn\n$msgFingerprint',
+                  child: SvgPicture.asset(
+                    'assets/${connectionType.secure.value}${connectionType.direct.value}.svg',
+                    width: themeConf.iconSize,
+                    height: themeConf.iconSize,
+                  ).paddingOnly(right: 5),
+                ),
+                label,
+                unreadMessageCountBuilder(UnreadChatCountState.find(key))
+                    .marginOnly(left: 4),
+              ],
+            );
+
+            return Listener(
+              onPointerDown: (e) {
+                if (e.kind != ui.PointerDeviceKind.mouse) {
+                  return;
+                }
+                final viewCameraPage = tabController.state.value.tabs
+                    .firstWhere((tab) => tab.key == key)
+                    .page as ViewCameraPage;
+                if (viewCameraPage.ffi.ffiModel.pi.isSet.isTrue &&
+                    e.buttons == 2) {
+                  showRightMenu(
+                    (CancelFunc cancelFunc) {
+                      return _tabMenuBuilder(key, cancelFunc);
+                    },
+                    target: e.position,
+                  );
+                }
+              },
+              child: tab,
+            );
+          }
+        }),
+      ),
+    );
+    final tabWidget = isLinux
+        ? buildVirtualWindowFrame(context, child)
+        : workaroundWindowBorder(
+            context,
+            Obx(() => Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                        color: MyTheme.color(context).border!,
+                        width: stateGlobal.windowBorderWidth.value),
+                  ),
+                  child: child,
+                )));
+    return isMacOS || kUseCompatibleUiMode
+        ? tabWidget
+        : Obx(() => SubWindowDragToResizeArea(
+              key: contentKey,
+              child: tabWidget,
+              // Specially configured for a better resize area and remote control.
+              childPadding: kDragToResizeAreaPadding,
+              resizeEdgeSize: stateGlobal.resizeEdgeSize.value,
+              enableResizeEdges: subWindowManagerEnableResizeEdges,
+              windowId: stateGlobal.windowId,
+            ));
+  }
+
+  // Note: Some dup code to ../widgets/remote_toolbar
+  Widget _tabMenuBuilder(String key, CancelFunc cancelFunc) {
+    final List<MenuEntryBase<String>> menu = [];
+    const EdgeInsets padding = EdgeInsets.only(left: 8.0, right: 5.0);
+    final viewCameraPage = tabController.state.value.tabs
+        .firstWhere((tab) => tab.key == key)
+        .page as ViewCameraPage;
+    final ffi = viewCameraPage.ffi;
+    final sessionId = ffi.sessionId;
+    final toolbarState = viewCameraPage.toolbarState;
+    menu.addAll([
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Obx(() => Text(
+              translate(
+                  toolbarState.hide.isTrue ? 'Show Toolbar' : 'Hide Toolbar'),
+              style: style,
+            )),
+        proc: () {
+          toolbarState.switchHide(sessionId);
+          cancelFunc();
+        },
+        padding: padding,
+      ),
+    ]);
+
+    if (tabController.state.value.tabs.length > 1) {
+      final splitAction = MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Move tab to new window'),
+          style: style,
+        ),
+        proc: () async {
+          await DesktopMultiWindow.invokeMethod(
+              kMainWindowId,
+              kWindowEventMoveTabToNewWindow,
+              '${windowId()},$key,$sessionId,ViewCamera');
+          cancelFunc();
+        },
+        padding: padding,
+      );
+      menu.insert(1, splitAction);
+    }
+
+    menu.addAll([
+      MenuEntryDivider<String>(),
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Copy Fingerprint'),
+          style: style,
+        ),
+        proc: () => onCopyFingerprint(FingerprintState.find(key).value),
+        padding: padding,
+        dismissOnClicked: true,
+        dismissCallback: cancelFunc,
+      ),
+      MenuEntryButton<String>(
+        childBuilder: (TextStyle? style) => Text(
+          translate('Close'),
+          style: style,
+        ),
+        proc: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: key,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(key);
+          cancelFunc();
+        },
+        padding: padding,
+      )
+    ]);
+
+    return mod_menu.PopupMenu<String>(
+      items: menu
+          .map((entry) => entry.build(
+              context,
+              const MenuConfig(
+                commonColor: _MenuTheme.blueColor,
+                height: _MenuTheme.height,
+                dividerHeight: _MenuTheme.dividerHeight,
+              )))
+          .expand((i) => i)
+          .toList(),
+    );
+  }
+
+  void onRemoveId(String id) async {
+    if (tabController.state.value.tabs.isEmpty) {
+      // Keep calling until the window status is hidden.
+      //
+      // Workaround for Windows:
+      // If you click other buttons and close in msgbox within a very short period of time, the close may fail.
+      // `await WindowController.fromWindowId(windowId()).close();`.
+      Future<void> loopCloseWindow() async {
+        int c = 0;
+        final windowController = WindowController.fromWindowId(windowId());
+        while (c < 20 &&
+            tabController.state.value.tabs.isEmpty &&
+            (!await windowController.isHidden())) {
+          await windowController.close();
+          await Future.delayed(Duration(milliseconds: 100));
+          c++;
+        }
+      }
+
+      loopCloseWindow();
+    }
+    ConnectionTypeState.delete(id);
+    _update_remote_count();
+  }
+
+  int windowId() {
+    return widget.params["windowId"];
+  }
+
+  Future<bool> handleWindowCloseButton() async {
+    final connLength = tabController.length;
+    if (connLength == 1) {
+      if (await desktopTryShowTabAuditDialogCloseCancelled(
+        id: tabController.state.value.tabs[0].key,
+        tabController: tabController,
+      )) {
+        return false;
+      }
+    }
+    if (connLength <= 1) {
+      tabController.clear();
+      return true;
+    } else {
+      final bool res;
+      if (!option2bool(kOptionEnableConfirmClosingTabs,
+          bind.mainGetLocalOption(key: kOptionEnableConfirmClosingTabs))) {
+        res = true;
+      } else {
+        res = await closeConfirmDialog();
+      }
+      if (res) {
+        tabController.clear();
+      }
+      return res;
+    }
+  }
+
+  _update_remote_count() =>
+      RemoteCountState.find().value = tabController.length;
+
+  Future<dynamic> _remoteMethodHandler(call, fromWindowId) async {
+    debugPrint(
+        "[View Camera Page] call ${call.method} with args ${call.arguments} from window $fromWindowId");
+
+    dynamic returnValue;
+    // for simplify, just replace connectionId
+    if (call.method == kWindowEventNewViewCamera) {
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final sessionId = args['session_id'];
+      final tabWindowId = args['tab_window_id'];
+      final display = args['display'];
+      final displays = args['displays'];
+      final screenRect = parseParamScreenRect(args);
+      final prePeerCount = tabController.length;
+      Future.delayed(Duration.zero, () async {
+        if (stateGlobal.fullscreen.isTrue) {
+          await WindowController.fromWindowId(windowId()).setFullscreen(false);
+          stateGlobal.setFullscreen(false, procWnd: false);
+        }
+        await setNewConnectWindowFrame(windowId(), id!, prePeerCount,
+            WindowType.ViewCamera, display, screenRect);
+        Future.delayed(Duration(milliseconds: isWindows ? 100 : 0), () async {
+          await windowOnTop(windowId());
+        });
+      });
+      ConnectionTypeState.init(id);
+      tabController.add(TabInfo(
+        key: id,
+        label: id,
+        selectedIcon: selectedIcon,
+        unselectedIcon: unselectedIcon,
+        onTabCloseButton: () async {
+          if (await desktopTryShowTabAuditDialogCloseCancelled(
+            id: id,
+            tabController: tabController,
+          )) {
+            return;
+          }
+          tabController.closeBy(id);
+        },
+        page: ViewCameraPage(
+          key: ValueKey(id),
+          id: id,
+          sessionId: sessionId == null ? null : SessionID(sessionId),
+          tabWindowId: tabWindowId,
+          display: display,
+          displays: displays?.cast<int>(),
+          password: args['password'],
+          toolbarState: ToolbarState(),
+          tabController: tabController,
+          connToken: args['connToken'],
+          forceRelay: args['forceRelay'],
+          isSharedPassword: args['isSharedPassword'],
+        ),
+      ));
+    } else if (call.method == kWindowDisableGrabKeyboard) {
+      // ???
+    } else if (call.method == "onDestroy") {
+      tabController.clear();
+    } else if (call.method == kWindowActionRebuild) {
+      reloadCurrentWindow();
+    } else if (call.method == kWindowEventActiveSession) {
+      final jumpOk = tabController.jumpToByKey(call.arguments);
+      if (jumpOk) {
+        windowOnTop(windowId());
+      }
+      return jumpOk;
+    } else if (call.method == kWindowEventActiveDisplaySession) {
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final display = args['display'];
+      final jumpOk =
+          tabController.jumpToByKeyAndDisplay(id, display, isCamera: true);
+      if (jumpOk) {
+        windowOnTop(windowId());
+      }
+      return jumpOk;
+    } else if (call.method == kWindowEventGetRemoteList) {
+      return tabController.state.value.tabs
+          .map((e) => e.key)
+          .toList()
+          .join(',');
+    } else if (call.method == kWindowEventGetSessionIdList) {
+      return tabController.state.value.tabs
+          .map((e) => '${e.key},${(e.page as ViewCameraPage).ffi.sessionId}')
+          .toList()
+          .join(';');
+    } else if (call.method == kWindowEventGetCachedSessionData) {
+      // Ready to show new window and close old tab.
+      final args = jsonDecode(call.arguments);
+      final id = args['id'];
+      final close = args['close'];
+      try {
+        final viewCameraPage = tabController.state.value.tabs
+            .firstWhere((tab) => tab.key == id)
+            .page as ViewCameraPage;
+        returnValue = viewCameraPage.ffi.ffiModel.cachedPeerData.toString();
+      } catch (e) {
+        debugPrint('Failed to get cached session data: $e');
+      }
+      if (close && returnValue != null) {
+        closeSessionOnDispose[id] = false;
+        tabController.closeBy(id);
+      }
+    } else if (call.method == kWindowEventRemoteWindowCoords) {
+      final viewCameraPage =
+          tabController.state.value.selectedTabInfo.page as ViewCameraPage;
+      final ffi = viewCameraPage.ffi;
+      final displayRect = ffi.ffiModel.displaysRect();
+      if (displayRect != null) {
+        final wc = WindowController.fromWindowId(windowId());
+        Rect? frame;
+        try {
+          frame = await wc.getFrame();
+        } catch (e) {
+          debugPrint(
+              "Failed to get frame of window $windowId, it may be hidden");
+        }
+        if (frame != null) {
+          ffi.cursorModel.moveLocal(0, 0);
+          final coords = RemoteWindowCoords(
+              frame,
+              CanvasCoords.fromCanvasModel(ffi.canvasModel),
+              CursorCoords.fromCursorModel(ffi.cursorModel),
+              displayRect);
+          returnValue = jsonEncode(coords.toJson());
+        }
+      }
+    } else if (call.method == kWindowEventSetFullscreen) {
+      stateGlobal.setFullscreen(call.arguments == 'true');
+    }
+    _update_remote_count();
+    return returnValue;
+  }
+}

flutter/lib/desktop/screen/desktop_file_transfer_screen.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/pages/file_manager_tab_page.dart';
+import 'package:provider/provider.dart';
+
+/// multi-tab file transfer remote screen
+class DesktopFileTransferScreen extends StatelessWidget {
+  final Map<String, dynamic> params;
+
+  const DesktopFileTransferScreen({Key? key, required this.params})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider.value(value: gFFI.ffiModel),
+        ChangeNotifierProvider.value(value: gFFI.imageModel),
+        ChangeNotifierProvider.value(value: gFFI.cursorModel),
+        ChangeNotifierProvider.value(value: gFFI.canvasModel),
+      ],
+      child: Scaffold(
+        backgroundColor: isLinux ? Colors.transparent : null,
+        body: FileManagerTabPage(
+          params: params,
+        ),
+      ),
+    );
+  }
+}

flutter/lib/desktop/screen/desktop_port_forward_screen.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/pages/port_forward_tab_page.dart';
+import 'package:provider/provider.dart';
+
+/// multi-tab file port forward screen
+class DesktopPortForwardScreen extends StatelessWidget {
+  final Map<String, dynamic> params;
+
+  const DesktopPortForwardScreen({Key? key, required this.params})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider.value(value: gFFI.ffiModel),
+      ],
+      child: Scaffold(
+        backgroundColor: isLinux ? Colors.transparent : null,
+        body: PortForwardTabPage(
+          params: params,
+        ),
+      ),
+    );
+  }
+}

flutter/lib/desktop/screen/desktop_remote_screen.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/pages/remote_tab_page.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:provider/provider.dart';
+
+/// multi-tab desktop remote screen
+class DesktopRemoteScreen extends StatelessWidget {
+  final Map<String, dynamic> params;
+
+  DesktopRemoteScreen({Key? key, required this.params}) : super(key: key) {
+      bind.mainInitInputSource();
+      stateGlobal.getInputSource(force: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider.value(value: gFFI.ffiModel),
+          ChangeNotifierProvider.value(value: gFFI.imageModel),
+          ChangeNotifierProvider.value(value: gFFI.cursorModel),
+          ChangeNotifierProvider.value(value: gFFI.canvasModel),
+        ],
+        child: Scaffold(
+          // Set transparent background for padding the resize area out of the flutter view.
+          // This allows the wallpaper goes through our resize area. (Linux only now).
+          backgroundColor: isLinux ? Colors.transparent : null,
+          body: ConnectionTabPage(
+            params: params,
+          ),
+        ));
+  }
+}

flutter/lib/desktop/screen/desktop_terminal_screen.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:provider/provider.dart';
+
+import 'package:flutter_hbb/desktop/pages/terminal_tab_page.dart';
+
+class DesktopTerminalScreen extends StatelessWidget {
+  final Map<String, dynamic> params;
+
+  const DesktopTerminalScreen({Key? key, required this.params})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider.value(value: gFFI.ffiModel),
+      ],
+      child: Scaffold(
+        backgroundColor: isLinux ? Colors.transparent : null,
+        body: TerminalTabPage(
+          params: params,
+        ),
+      ),
+    );
+  }
+}

flutter/lib/desktop/screen/desktop_view_camera_screen.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/desktop/pages/view_camera_tab_page.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:flutter_hbb/models/state_model.dart';
+import 'package:provider/provider.dart';
+
+/// multi-tab desktop remote screen
+class DesktopViewCameraScreen extends StatelessWidget {
+  final Map<String, dynamic> params;
+
+  DesktopViewCameraScreen({Key? key, required this.params}) : super(key: key) {
+      bind.mainInitInputSource();
+      stateGlobal.getInputSource(force: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider.value(value: gFFI.ffiModel),
+          ChangeNotifierProvider.value(value: gFFI.imageModel),
+          ChangeNotifierProvider.value(value: gFFI.cursorModel),
+          ChangeNotifierProvider.value(value: gFFI.canvasModel),
+        ],
+        child: Scaffold(
+          // Set transparent background for padding the resize area out of the flutter view.
+          // This allows the wallpaper goes through our resize area. (Linux only now).
+          backgroundColor: isLinux ? Colors.transparent : null,
+          body: ViewCameraTabPage(
+            params: params,
+          ),
+        ));
+  }
+}

flutter/lib/desktop/widgets/button.dart

@@ -0,0 +1,171 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../common.dart';
+
+class Button extends StatefulWidget {
+  final GestureTapCallback onTap;
+  final String text;
+  final double? textSize;
+  final double? minWidth;
+  final bool isOutline;
+  final double? padding;
+  final Color? textColor;
+  final double? radius;
+  final Color? borderColor;
+
+  Button({
+    Key? key,
+    this.minWidth,
+    this.isOutline = false,
+    this.textSize,
+    this.padding,
+    this.textColor,
+    this.radius,
+    this.borderColor,
+    required this.onTap,
+    required this.text,
+  }) : super(key: key);
+
+  @override
+  State<Button> createState() => _ButtonState();
+}
+
+class _ButtonState extends State<Button> {
+  RxBool hover = false.obs;
+  RxBool pressed = false.obs;
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() => InkWell(
+          onTapDown: (_) => pressed.value = true,
+          onTapUp: (_) => pressed.value = false,
+          onTapCancel: () => pressed.value = false,
+          onHover: (value) => hover.value = value,
+          onTap: widget.onTap,
+          child: ConstrainedBox(
+              constraints: BoxConstraints(
+                minWidth: widget.minWidth ?? 70.0,
+              ),
+              child: Container(
+                padding: EdgeInsets.all(widget.padding ?? 4.5),
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: pressed.value
+                      ? MyTheme.accent
+                      : (widget.isOutline
+                          ? Colors.transparent
+                          : MyTheme.button),
+                  border: Border.all(
+                    color: pressed.value
+                        ? MyTheme.accent
+                        : hover.value
+                            ? MyTheme.hoverBorder
+                            : (widget.isOutline
+                                ? widget.borderColor ?? MyTheme.border
+                                : MyTheme.button),
+                  ),
+                  borderRadius: BorderRadius.circular(widget.radius ?? 5),
+                ),
+                child: Text(
+                  translate(
+                    widget.text,
+                  ),
+                  style: TextStyle(
+                      fontSize: widget.textSize ?? 12.0,
+                      color: widget.isOutline
+                          ? widget.textColor ??
+                              Theme.of(context).textTheme.titleLarge?.color
+                          : Colors.white),
+                ).marginSymmetric(horizontal: 12),
+              )),
+        ));
+  }
+}
+
+class FixedWidthButton extends StatefulWidget {
+  final GestureTapCallback onTap;
+  final String text;
+  final double? textSize;
+  final double width;
+  final bool isOutline;
+  final double? padding;
+  final Color? textColor;
+  final double? radius;
+  final Color? borderColor;
+  final int? maxLines;
+
+  FixedWidthButton({
+    Key? key,
+    required this.width,
+    this.maxLines,
+    this.isOutline = false,
+    this.textSize,
+    this.padding,
+    this.textColor,
+    this.radius,
+    this.borderColor,
+    required this.onTap,
+    required this.text,
+  }) : super(key: key);
+
+  @override
+  State<FixedWidthButton> createState() => _FixedWidthButtonState();
+}
+
+class _FixedWidthButtonState extends State<FixedWidthButton> {
+  RxBool hover = false.obs;
+  RxBool pressed = false.obs;
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() => InkWell(
+          onTapDown: (_) => pressed.value = true,
+          onTapUp: (_) => pressed.value = false,
+          onTapCancel: () => pressed.value = false,
+          onHover: (value) => hover.value = value,
+          onTap: widget.onTap,
+          child: Container(
+            width: widget.width,
+            padding: EdgeInsets.all(widget.padding ?? 4.5),
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              color: pressed.value
+                  ? MyTheme.accent
+                  : (widget.isOutline ? Colors.transparent : MyTheme.button),
+              border: Border.all(
+                color: pressed.value
+                    ? MyTheme.accent
+                    : hover.value
+                        ? MyTheme.hoverBorder
+                        : (widget.isOutline
+                            ? widget.borderColor ?? MyTheme.border
+                            : MyTheme.button),
+              ),
+              borderRadius: BorderRadius.circular(widget.radius ?? 5),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Flexible(
+                  child: AutoSizeText(
+                    translate(
+                      widget.text,
+                    ),
+                    maxLines: widget.maxLines ?? 1,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                        fontSize: widget.textSize ?? 12.0,
+                        color: widget.isOutline
+                            ? widget.textColor ??
+                                Theme.of(context).textTheme.titleLarge?.color
+                            : Colors.white),
+                  ).marginSymmetric(horizontal: 12),
+                ),
+              ],
+            ),
+          ),
+        ));
+  }
+}

flutter/lib/desktop/widgets/dragable_divider.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class DraggableDivider extends StatefulWidget {
+  final Axis axis;
+  final double thickness;
+  final Color color;
+  final Function(double)? onPointerMove;
+  final VoidCallback? onHover;
+  final EdgeInsets padding;
+  const DraggableDivider({
+    super.key,
+    this.axis = Axis.horizontal,
+    this.thickness = 1.0,
+    this.color = const Color.fromARGB(200, 177, 175, 175),
+    this.onPointerMove,
+    this.padding = const EdgeInsets.symmetric(horizontal: 1.0),
+    this.onHover,
+  });
+
+  @override
+  State<DraggableDivider> createState() => _DraggableDividerState();
+}
+
+class _DraggableDividerState extends State<DraggableDivider> {
+  @override
+  Widget build(BuildContext context) {
+    return Listener(
+      onPointerMove: (event) {
+        final dl = widget.axis == Axis.horizontal
+            ? event.localDelta.dy
+            : event.localDelta.dx;
+        widget.onPointerMove?.call(dl);
+      },
+      onPointerHover: (event) => widget.onHover?.call(),
+      child: MouseRegion(
+        cursor: SystemMouseCursors.resizeLeftRight,
+        child: Padding(
+          padding: widget.padding,
+          child: Container(
+            decoration: BoxDecoration(color: widget.color),
+            width: widget.axis == Axis.horizontal
+                ? double.infinity
+                : widget.thickness,
+            height: widget.axis == Axis.horizontal
+                ? widget.thickness
+                : double.infinity,
+          ),
+        ),
+      ),
+    );
+  }
+}

flutter/lib/desktop/widgets/kb_layout_type_chooser.dart

@@ -0,0 +1,225 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+
+import '../../common.dart';
+
+typedef KBChosenCallback = Future<bool> Function(String);
+
+const double _kImageMarginVertical = 6.0;
+const double _kImageMarginHorizontal = 10.0;
+const double _kImageBoarderWidth = 4.0;
+const double _kImagePaddingWidth = 4.0;
+const Color _kImageBorderColor = Color.fromARGB(125, 202, 247, 2);
+const double _kBorderRadius = 6.0;
+const String _kKBLayoutTypeISO = 'ISO';
+const String _kKBLayoutTypeNotISO = 'Not ISO';
+
+const _kKBLayoutImageMap = {
+  _kKBLayoutTypeISO: 'kb_layout_iso',
+  _kKBLayoutTypeNotISO: 'kb_layout_not_iso',
+};
+
+class _KBImage extends StatelessWidget {
+  final String kbLayoutType;
+  final double imageWidth;
+  final RxString chosenType;
+  const _KBImage({
+    Key? key,
+    required this.kbLayoutType,
+    required this.imageWidth,
+    required this.chosenType,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() {
+      return Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(_kBorderRadius),
+          border: Border.all(
+            color: chosenType.value == kbLayoutType
+                ? _kImageBorderColor
+                : Colors.transparent,
+            width: _kImageBoarderWidth,
+          ),
+        ),
+        margin: EdgeInsets.symmetric(
+          horizontal: _kImageMarginHorizontal,
+          vertical: _kImageMarginVertical,
+        ),
+        padding: EdgeInsets.all(_kImagePaddingWidth),
+        child: SvgPicture.asset(
+          'assets/${_kKBLayoutImageMap[kbLayoutType] ?? ""}.svg',
+          width: imageWidth -
+              _kImageMarginHorizontal * 2 -
+              _kImagePaddingWidth * 2 -
+              _kImageBoarderWidth * 2,
+        ),
+      );
+    });
+  }
+}
+
+class _KBChooser extends StatelessWidget {
+  final String kbLayoutType;
+  final double imageWidth;
+  final RxString chosenType;
+  final KBChosenCallback cb;
+  const _KBChooser({
+    Key? key,
+    required this.kbLayoutType,
+    required this.imageWidth,
+    required this.chosenType,
+    required this.cb,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    onChanged(String? v) async {
+      if (v != null) {
+        if (await cb(v)) {
+          chosenType.value = v;
+        }
+      }
+    }
+
+    return Column(
+      children: [
+        TextButton(
+          onPressed: () {
+            onChanged(kbLayoutType);
+          },
+          child: _KBImage(
+            kbLayoutType: kbLayoutType,
+            imageWidth: imageWidth,
+            chosenType: chosenType,
+          ),
+          style: TextButton.styleFrom(padding: EdgeInsets.zero),
+        ),
+        TextButton(
+          child: Row(
+            children: [
+              Obx(() => Radio(
+                    splashRadius: 0,
+                    value: kbLayoutType,
+                    groupValue: chosenType.value,
+                    onChanged: onChanged,
+                  )),
+              Text(kbLayoutType),
+            ],
+          ),
+          onPressed: () {
+            onChanged(kbLayoutType);
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class KBLayoutTypeChooser extends StatelessWidget {
+  final RxString chosenType;
+  final double width;
+  final double height;
+  final double dividerWidth;
+  final KBChosenCallback cb;
+  KBLayoutTypeChooser({
+    Key? key,
+    required this.chosenType,
+    required this.width,
+    required this.height,
+    required this.dividerWidth,
+    required this.cb,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final imageWidth = width / 2 - dividerWidth;
+    return SizedBox(
+      width: width,
+      height: height,
+      child: Center(
+        child: Row(
+          children: [
+            _KBChooser(
+              kbLayoutType: _kKBLayoutTypeISO,
+              imageWidth: imageWidth,
+              chosenType: chosenType,
+              cb: cb,
+            ),
+            VerticalDivider(
+              width: dividerWidth * 2,
+            ),
+            _KBChooser(
+              kbLayoutType: _kKBLayoutTypeNotISO,
+              imageWidth: imageWidth,
+              chosenType: chosenType,
+              cb: cb,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+RxString KBLayoutType = ''.obs;
+
+String getLocalPlatformForKBLayoutType(String peerPlatform) {
+  String localPlatform = '';
+  if (peerPlatform != kPeerPlatformMacOS) {
+    return localPlatform;
+  }
+
+  if (isWindows) {
+    localPlatform = kPeerPlatformWindows;
+  } else if (isLinux) {
+    localPlatform = kPeerPlatformLinux;
+  } else if (isWebOnWindows || isWebOnLinux) {
+    localPlatform = kPeerPlatformWebDesktop;
+  }
+  return localPlatform;
+}
+
+showKBLayoutTypeChooserIfNeeded(
+  String peerPlatform,
+  OverlayDialogManager dialogManager,
+) async {
+  final localPlatform = getLocalPlatformForKBLayoutType(peerPlatform);
+  if (localPlatform == '') {
+    return;
+  }
+  KBLayoutType.value = bind.getLocalKbLayoutType();
+  if (KBLayoutType.value == _kKBLayoutTypeISO ||
+      KBLayoutType.value == _kKBLayoutTypeNotISO) {
+    return;
+  }
+  showKBLayoutTypeChooser(localPlatform, dialogManager);
+}
+
+showKBLayoutTypeChooser(
+  String localPlatform,
+  OverlayDialogManager dialogManager,
+) {
+  dialogManager.show((setState, close, context) {
+    return CustomAlertDialog(
+      title:
+          Text('${translate('Select local keyboard type')} ($localPlatform)'),
+      content: KBLayoutTypeChooser(
+          chosenType: KBLayoutType,
+          width: 360,
+          height: 200,
+          dividerWidth: 4.0,
+          cb: (String v) async {
+            await bind.setLocalKbLayoutType(kbLayoutType: v);
+            KBLayoutType.value = bind.getLocalKbLayoutType();
+            return v == KBLayoutType.value;
+          }),
+      actions: [dialogButton('Close', onPressed: close)],
+      onCancel: close,
+    );
+  });
+}

flutter/lib/desktop/widgets/list_search_action_listener.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+
+class ListSearchActionListener extends StatelessWidget {
+  final FocusNode node;
+  final TimeoutStringBuffer buffer;
+  final Widget child;
+  final Function(String) onNext;
+  final Function(String) onSearch;
+
+  const ListSearchActionListener(
+      {super.key,
+      required this.node,
+      required this.buffer,
+      required this.child,
+      required this.onNext,
+      required this.onSearch});
+
+  @mustCallSuper
+  @override
+  Widget build(BuildContext context) {
+    return KeyboardListener(
+        autofocus: true,
+        onKeyEvent: (kv) {
+          final ch = kv.character;
+          if (ch == null) {
+            return;
+          }
+          final action = buffer.input(ch);
+          switch (action) {
+            case ListSearchAction.search:
+              onSearch(buffer.buffer);
+              break;
+            case ListSearchAction.next:
+              onNext(buffer.buffer);
+              break;
+          }
+        },
+        focusNode: node,
+        child: child);
+  }
+}
+
+enum ListSearchAction { search, next }
+
+class TimeoutStringBuffer {
+  var _buffer = "";
+  late DateTime _duration;
+
+  static int timeoutMilliSec = 1500;
+
+  String get buffer => _buffer;
+
+  TimeoutStringBuffer() {
+    _duration = DateTime.now();
+  }
+
+  ListSearchAction input(String ch) {
+    ch = ch.toLowerCase();
+    final curr = DateTime.now();
+    try {
+      if (curr.difference(_duration).inMilliseconds > timeoutMilliSec) {
+        _buffer = ch;
+        return ListSearchAction.search;
+      } else {
+        if (ch == _buffer) {
+          return ListSearchAction.next;
+        } else {
+          _buffer += ch;
+          return ListSearchAction.search;
+        }
+      }
+    } finally {
+      _duration = curr;
+    }
+  }
+}

flutter/lib/desktop/widgets/menu_button.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+class MenuButton extends StatefulWidget {
+  final GestureTapCallback? onPressed;
+  final Color color;
+  final Color hoverColor;
+  final Color? splashColor;
+  final Widget child;
+  final String? tooltip;
+  final EdgeInsetsGeometry padding;
+  final bool enableFeedback;
+  const MenuButton({
+    super.key,
+    required this.onPressed,
+    required this.color,
+    required this.hoverColor,
+    required this.child,
+    this.splashColor,
+    this.tooltip = "",
+    this.padding = const EdgeInsets.symmetric(horizontal: 3, vertical: 6),
+    this.enableFeedback = true,
+  });
+
+  @override
+  State<MenuButton> createState() => _MenuButtonState();
+}
+
+class _MenuButtonState extends State<MenuButton> {
+  bool _isHover = false;
+  final double _borderRadius = 8.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: widget.padding,
+      child: Tooltip(
+        waitDuration: Duration(milliseconds: 300),
+        message: widget.tooltip,
+        child: Material(
+          type: MaterialType.transparency,
+          child: Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(_borderRadius),
+              color: _isHover ? widget.hoverColor : widget.color,
+            ),
+            child: InkWell(
+              hoverColor: widget.hoverColor,
+              onHover: (val) {
+                setState(() {
+                  _isHover = val;
+                });
+              },
+              borderRadius: BorderRadius.circular(_borderRadius),
+              splashColor: widget.splashColor,
+              enableFeedback: widget.enableFeedback,
+              onTap: widget.onPressed,
+              child: widget.child,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

flutter/lib/desktop/widgets/popup_menu.dart

@@ -0,0 +1,755 @@
+import 'dart:core';
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../common.dart';
+import './material_mod_popup_menu.dart' as mod_menu;
+
+// https://stackoverflow.com/questions/68318314/flutter-popup-menu-inside-popup-menu
+class PopupMenuChildrenItem<T> extends mod_menu.PopupMenuEntry<T> {
+  const PopupMenuChildrenItem({
+    key,
+    this.height = kMinInteractiveDimension,
+    this.padding,
+    this.enabled,
+    this.textStyle,
+    this.onTap,
+    this.position = mod_menu.PopupMenuPosition.overSide,
+    this.offset = Offset.zero,
+    required this.itemBuilder,
+    required this.child,
+  }) : super(key: key);
+
+  final mod_menu.PopupMenuPosition position;
+  final Offset offset;
+  final TextStyle? textStyle;
+  final EdgeInsets? padding;
+  final RxBool? enabled;
+  final void Function()? onTap;
+  final List<mod_menu.PopupMenuEntry<T>> Function(BuildContext) itemBuilder;
+  final Widget child;
+
+  @override
+  final double height;
+
+  @override
+  bool represents(T? value) => false;
+
+  @override
+  MyPopupMenuItemState<T, PopupMenuChildrenItem<T>> createState() =>
+      MyPopupMenuItemState<T, PopupMenuChildrenItem<T>>(enabled?.value);
+}
+
+class MyPopupMenuItemState<T, W extends PopupMenuChildrenItem<T>>
+    extends State<W> {
+  RxBool enabled = true.obs;
+
+  MyPopupMenuItemState(bool? e) {
+    if (e != null) {
+      enabled.value = e;
+    }
+  }
+
+  @protected
+  void handleTap(T value) {
+    widget.onTap?.call();
+    Navigator.pop<T>(context, value);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
+    TextStyle style = widget.textStyle ??
+        popupMenuTheme.textStyle ??
+        theme.textTheme.titleMedium!;
+    return Obx(() => mod_menu.PopupMenuButton<T>(
+          enabled: enabled.value,
+          position: widget.position,
+          offset: widget.offset,
+          onSelected: handleTap,
+          itemBuilder: widget.itemBuilder,
+          padding: EdgeInsets.zero,
+          child: AnimatedDefaultTextStyle(
+            style: style,
+            duration: kThemeChangeDuration,
+            child: Container(
+              alignment: AlignmentDirectional.centerStart,
+              constraints: BoxConstraints(
+                  minHeight: widget.height, maxHeight: widget.height),
+              padding:
+                  widget.padding ?? const EdgeInsets.symmetric(horizontal: 16),
+              child: widget.child,
+            ),
+          ),
+        ));
+  }
+}
+
+class MenuConfig {
+  // adapt to the screen height
+  static const fontSize = 14.0;
+  static const midPadding = 10.0;
+  static const iconScale = 0.8;
+  static const iconWidth = 12.0;
+  static const iconHeight = 12.0;
+
+  final double height;
+  final double dividerHeight;
+  final double? boxWidth;
+  final Color commonColor;
+
+  const MenuConfig(
+      {required this.commonColor,
+      this.height = kMinInteractiveDimension,
+      this.dividerHeight = 16.0,
+      this.boxWidth});
+}
+
+typedef DismissCallback = Function();
+
+abstract class MenuEntryBase<T> {
+  bool dismissOnClicked;
+  DismissCallback? dismissCallback;
+  RxBool? enabled;
+
+  MenuEntryBase({
+    this.dismissOnClicked = false,
+    this.enabled,
+    this.dismissCallback,
+  });
+  List<mod_menu.PopupMenuEntry<T>> build(BuildContext context, MenuConfig conf);
+
+  enabledStyle(BuildContext context) => TextStyle(
+      color: Theme.of(context).textTheme.titleLarge?.color,
+      fontSize: MenuConfig.fontSize,
+      fontWeight: FontWeight.normal);
+  disabledStyle() => TextStyle(
+      color: Colors.grey,
+      fontSize: MenuConfig.fontSize,
+      fontWeight: FontWeight.normal);
+}
+
+class MenuEntryDivider<T> extends MenuEntryBase<T> {
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    return [
+      mod_menu.PopupMenuDivider(
+        height: conf.dividerHeight,
+      )
+    ];
+  }
+}
+
+class MenuEntryRadioOption {
+  String text;
+  String value;
+  bool dismissOnClicked;
+  RxBool? enabled;
+  DismissCallback? dismissCallback;
+
+  MenuEntryRadioOption({
+    required this.text,
+    required this.value,
+    this.dismissOnClicked = false,
+    this.enabled,
+    this.dismissCallback,
+  });
+}
+
+typedef RadioOptionsGetter = List<MenuEntryRadioOption> Function();
+typedef RadioCurOptionGetter = Future<String> Function();
+typedef RadioOptionSetter = Future<void> Function(
+    String oldValue, String newValue);
+
+class MenuEntryRadioUtils<T> {}
+
+class MenuEntryRadios<T> extends MenuEntryBase<T> {
+  final String text;
+  final RadioOptionsGetter optionsGetter;
+  final RadioCurOptionGetter curOptionGetter;
+  final RadioOptionSetter optionSetter;
+  final RxString _curOption = "".obs;
+  final EdgeInsets? padding;
+
+  MenuEntryRadios({
+    required this.text,
+    required this.optionsGetter,
+    required this.curOptionGetter,
+    required this.optionSetter,
+    this.padding,
+    dismissOnClicked = false,
+    dismissCallback,
+    RxBool? enabled,
+  }) : super(
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+          dismissCallback: dismissCallback,
+        ) {
+    () async {
+      _curOption.value = await curOptionGetter();
+    }();
+  }
+
+  List<MenuEntryRadioOption> get options => optionsGetter();
+  RxString get curOption => _curOption;
+  setOption(String option) async {
+    await optionSetter(_curOption.value, option);
+    if (_curOption.value != option) {
+      final opt = await curOptionGetter();
+      if (_curOption.value != opt) {
+        _curOption.value = opt;
+      }
+    }
+  }
+
+  mod_menu.PopupMenuEntry<T> _buildMenuItem(
+      BuildContext context, MenuConfig conf, MenuEntryRadioOption opt) {
+    Widget getTextChild() {
+      final enabledTextChild = Text(
+        opt.text,
+        style: enabledStyle(context),
+      );
+      final disabledTextChild = Text(
+        opt.text,
+        style: disabledStyle(),
+      );
+      if (opt.enabled == null) {
+        return enabledTextChild;
+      } else {
+        return Obx(
+            () => opt.enabled!.isTrue ? enabledTextChild : disabledTextChild);
+      }
+    }
+
+    final child = Container(
+      padding: padding,
+      alignment: AlignmentDirectional.centerStart,
+      constraints:
+          BoxConstraints(minHeight: conf.height, maxHeight: conf.height),
+      child: Row(
+        children: [
+          getTextChild(),
+          Expanded(
+              child: Align(
+                  alignment: Alignment.centerRight,
+                  child: Transform.scale(
+                    scale: MenuConfig.iconScale,
+                    child: Obx(() => opt.value == curOption.value
+                        ? IconButton(
+                            padding:
+                                const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
+                            hoverColor: Colors.transparent,
+                            focusColor: Colors.transparent,
+                            onPressed: () {},
+                            icon: Icon(
+                              Icons.check,
+                              color: (opt.enabled ?? true.obs).isTrue
+                                  ? conf.commonColor
+                                  : Colors.grey,
+                            ))
+                        : const SizedBox.shrink()),
+                  ))),
+        ],
+      ),
+    );
+    onPressed() {
+      if (opt.dismissOnClicked && Navigator.canPop(context)) {
+        Navigator.pop(context);
+        if (opt.dismissCallback != null) {
+          opt.dismissCallback!();
+        }
+      }
+      setOption(opt.value);
+    }
+
+    return mod_menu.PopupMenuItem(
+      padding: EdgeInsets.zero,
+      height: conf.height,
+      child: Container(
+        width: conf.boxWidth,
+        child: opt.enabled == null
+            ? TextButton(
+                child: child,
+                onPressed: onPressed,
+              )
+            : Obx(() => TextButton(
+                  child: child,
+                  onPressed: opt.enabled!.isTrue ? onPressed : null,
+                )),
+      ),
+    );
+  }
+
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    return options.map((opt) => _buildMenuItem(context, conf, opt)).toList();
+  }
+}
+
+class MenuEntrySubRadios<T> extends MenuEntryBase<T> {
+  final String text;
+  final RadioOptionsGetter optionsGetter;
+  final RadioCurOptionGetter curOptionGetter;
+  final RadioOptionSetter optionSetter;
+  final RxString _curOption = "".obs;
+  final EdgeInsets? padding;
+
+  MenuEntrySubRadios({
+    required this.text,
+    required this.optionsGetter,
+    required this.curOptionGetter,
+    required this.optionSetter,
+    this.padding,
+    dismissOnClicked = false,
+    RxBool? enabled,
+  }) : super(
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+        ) {
+    () async {
+      _curOption.value = await curOptionGetter();
+    }();
+  }
+
+  List<MenuEntryRadioOption> get options => optionsGetter();
+  RxString get curOption => _curOption;
+  setOption(String option) async {
+    await optionSetter(_curOption.value, option);
+    if (_curOption.value != option) {
+      final opt = await curOptionGetter();
+      if (_curOption.value != opt) {
+        _curOption.value = opt;
+      }
+    }
+  }
+
+  mod_menu.PopupMenuEntry<T> _buildSecondMenu(
+      BuildContext context, MenuConfig conf, MenuEntryRadioOption opt) {
+    return mod_menu.PopupMenuItem(
+      padding: EdgeInsets.zero,
+      height: conf.height,
+      child: Container(
+          width: conf.boxWidth,
+          child: TextButton(
+            child: Container(
+              padding: padding,
+              alignment: AlignmentDirectional.centerStart,
+              constraints: BoxConstraints(
+                  minHeight: conf.height, maxHeight: conf.height),
+              child: Row(
+                children: [
+                  Text(
+                    opt.text,
+                    style: TextStyle(
+                        color: Theme.of(context).textTheme.titleLarge?.color,
+                        fontSize: MenuConfig.fontSize,
+                        fontWeight: FontWeight.normal),
+                  ),
+                  Expanded(
+                      child: Align(
+                    alignment: Alignment.centerRight,
+                    child: Transform.scale(
+                        scale: MenuConfig.iconScale,
+                        child: Obx(() => opt.value == curOption.value
+                            ? IconButton(
+                                padding: EdgeInsets.zero,
+                                hoverColor: Colors.transparent,
+                                focusColor: Colors.transparent,
+                                onPressed: () {},
+                                icon: Icon(
+                                  Icons.check,
+                                  color: conf.commonColor,
+                                ))
+                            : const SizedBox.shrink())),
+                  )),
+                ],
+              ),
+            ),
+            onPressed: () {
+              if (opt.dismissOnClicked && Navigator.canPop(context)) {
+                Navigator.pop(context);
+                if (opt.dismissCallback != null) {
+                  opt.dismissCallback!();
+                }
+              }
+              setOption(opt.value);
+            },
+          )),
+    );
+  }
+
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    return [
+      PopupMenuChildrenItem(
+        enabled: super.enabled,
+        padding: padding,
+        height: conf.height,
+        itemBuilder: (BuildContext context) =>
+            options.map((opt) => _buildSecondMenu(context, conf, opt)).toList(),
+        child: Row(children: [
+          const SizedBox(width: MenuConfig.midPadding),
+          Text(
+            text,
+            style: TextStyle(
+                color: Theme.of(context).textTheme.titleLarge?.color,
+                fontSize: MenuConfig.fontSize,
+                fontWeight: FontWeight.normal),
+          ),
+          Expanded(
+              child: Align(
+            alignment: Alignment.centerRight,
+            child: Icon(
+              Icons.keyboard_arrow_right,
+              color: conf.commonColor,
+            ),
+          ))
+        ]),
+      )
+    ];
+  }
+}
+
+enum SwitchType {
+  sswitch,
+  scheckbox,
+}
+
+typedef SwitchGetter = Future<bool> Function();
+typedef SwitchSetter = Future<void> Function(bool);
+
+abstract class MenuEntrySwitchBase<T> extends MenuEntryBase<T> {
+  final SwitchType switchType;
+  final String text;
+  final EdgeInsets? padding;
+  Rx<TextStyle>? textStyle;
+
+  MenuEntrySwitchBase({
+    required this.switchType,
+    required this.text,
+    required dismissOnClicked,
+    this.textStyle,
+    this.padding,
+    RxBool? enabled,
+    dismissCallback,
+  }) : super(
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+          dismissCallback: dismissCallback,
+        );
+
+  bool get isEnabled => enabled?.value ?? true;
+
+  RxBool get curOption;
+  Future<void> setOption(bool? option);
+
+  tryPop(BuildContext context) {
+    if (dismissOnClicked && Navigator.canPop(context)) {
+      Navigator.pop(context);
+      super.dismissCallback?.call();
+    }
+  }
+
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    textStyle ??= TextStyle(
+            color: Theme.of(context).textTheme.titleLarge?.color,
+            fontSize: MenuConfig.fontSize,
+            fontWeight: FontWeight.normal)
+        .obs;
+    return [
+      mod_menu.PopupMenuItem(
+        padding: EdgeInsets.zero,
+        height: conf.height,
+        child: Container(
+            width: conf.boxWidth,
+            child: TextButton(
+              child: Container(
+                  padding: padding,
+                  alignment: AlignmentDirectional.centerStart,
+                  height: conf.height,
+                  child: Row(children: [
+                    Obx(() => Text(
+                          text,
+                          style: textStyle!.value,
+                        )),
+                    Expanded(
+                        child: Align(
+                      alignment: Alignment.centerRight,
+                      child: Transform.scale(
+                          scale: MenuConfig.iconScale,
+                          child: Obx(() {
+                            if (switchType == SwitchType.sswitch) {
+                              return Switch(
+                                value: curOption.value,
+                                onChanged: isEnabled
+                                    ? (v) {
+                                        tryPop(context);
+                                        setOption(v);
+                                      }
+                                    : null,
+                              );
+                            } else {
+                              return Checkbox(
+                                value: curOption.value,
+                                onChanged: isEnabled
+                                    ? (v) {
+                                        tryPop(context);
+                                        setOption(v);
+                                      }
+                                    : null,
+                              );
+                            }
+                          })),
+                    ))
+                  ])),
+              onPressed: isEnabled
+                  ? () {
+                      tryPop(context);
+                      setOption(!curOption.value);
+                    }
+                  : null,
+            )),
+      )
+    ];
+  }
+}
+
+class MenuEntrySwitch<T> extends MenuEntrySwitchBase<T> {
+  final SwitchGetter getter;
+  final SwitchSetter setter;
+  final RxBool _curOption = false.obs;
+
+  MenuEntrySwitch({
+    required SwitchType switchType,
+    required String text,
+    required this.getter,
+    required this.setter,
+    Rx<TextStyle>? textStyle,
+    EdgeInsets? padding,
+    dismissOnClicked = false,
+    RxBool? enabled,
+    dismissCallback,
+  }) : super(
+          switchType: switchType,
+          text: text,
+          textStyle: textStyle,
+          padding: padding,
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+          dismissCallback: dismissCallback,
+        ) {
+    () async {
+      _curOption.value = await getter();
+    }();
+  }
+
+  @override
+  RxBool get curOption => _curOption;
+  @override
+  setOption(bool? option) async {
+    if (option != null) {
+      await setter(option);
+      final opt = await getter();
+      if (_curOption.value != opt) {
+        _curOption.value = opt;
+      }
+    }
+  }
+}
+
+// Compatible with MenuEntrySwitch, it uses value instead of getter
+class MenuEntrySwitchSync<T> extends MenuEntrySwitchBase<T> {
+  final SwitchSetter setter;
+  final RxBool _curOption = false.obs;
+
+  MenuEntrySwitchSync({
+    required SwitchType switchType,
+    required String text,
+    required bool currentValue,
+    required this.setter,
+    Rx<TextStyle>? textStyle,
+    EdgeInsets? padding,
+    dismissOnClicked = false,
+    RxBool? enabled,
+    dismissCallback,
+  }) : super(
+          switchType: switchType,
+          text: text,
+          textStyle: textStyle,
+          padding: padding,
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+          dismissCallback: dismissCallback,
+        ) {
+    _curOption.value = currentValue;
+  }
+
+  @override
+  RxBool get curOption => _curOption;
+  @override
+  setOption(bool? option) async {
+    if (option != null) {
+      await setter(option);
+      // Notice: no ensure with getter, best used on menus that are destroyed on click
+      if (_curOption.value != option) {
+        _curOption.value = option;
+      }
+    }
+  }
+}
+
+typedef Switch2Getter = RxBool Function();
+typedef Switch2Setter = Future<void> Function(bool);
+
+class MenuEntrySwitch2<T> extends MenuEntrySwitchBase<T> {
+  final Switch2Getter getter;
+  final SwitchSetter setter;
+
+  MenuEntrySwitch2({
+    required SwitchType switchType,
+    required String text,
+    required this.getter,
+    required this.setter,
+    Rx<TextStyle>? textStyle,
+    EdgeInsets? padding,
+    dismissOnClicked = false,
+    RxBool? enabled,
+    dismissCallback,
+  }) : super(
+          switchType: switchType,
+          text: text,
+          textStyle: textStyle,
+          padding: padding,
+          dismissOnClicked: dismissOnClicked,
+          dismissCallback: dismissCallback,
+        );
+
+  @override
+  RxBool get curOption => getter();
+  @override
+  setOption(bool? option) async {
+    if (option != null) {
+      await setter(option);
+    }
+  }
+}
+
+class MenuEntrySubMenu<T> extends MenuEntryBase<T> {
+  final String text;
+  final List<MenuEntryBase<T>> entries;
+  final EdgeInsets? padding;
+
+  MenuEntrySubMenu({
+    required this.text,
+    required this.entries,
+    this.padding,
+    RxBool? enabled,
+  }) : super(enabled: enabled);
+
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    super.enabled ??= true.obs;
+    return [
+      PopupMenuChildrenItem(
+        enabled: super.enabled,
+        height: conf.height,
+        padding: padding,
+        position: mod_menu.PopupMenuPosition.overSide,
+        itemBuilder: (BuildContext context) => entries
+            .map((entry) => entry.build(context, conf))
+            .expand((i) => i)
+            .toList(),
+        child: Row(children: [
+          const SizedBox(width: MenuConfig.midPadding),
+          Obx(() => Text(
+                text,
+                style: super.enabled!.value
+                    ? enabledStyle(context)
+                    : disabledStyle(),
+              )),
+          Expanded(
+              child: Align(
+            alignment: Alignment.centerRight,
+            child: Obx(() => Icon(
+                  Icons.keyboard_arrow_right,
+                  color: super.enabled!.value ? conf.commonColor : Colors.grey,
+                )),
+          ))
+        ]),
+      )
+    ];
+  }
+}
+
+class MenuEntryButton<T> extends MenuEntryBase<T> {
+  final Widget Function(TextStyle? style) childBuilder;
+  Function() proc;
+  final EdgeInsets? padding;
+
+  MenuEntryButton({
+    required this.childBuilder,
+    required this.proc,
+    this.padding,
+    dismissOnClicked = false,
+    RxBool? enabled,
+    dismissCallback,
+  }) : super(
+          dismissOnClicked: dismissOnClicked,
+          enabled: enabled,
+          dismissCallback: dismissCallback,
+        );
+
+  Widget _buildChild(BuildContext context, MenuConfig conf) {
+    super.enabled ??= true.obs;
+    return Obx(() => Container(
+        width: conf.boxWidth,
+        child: TextButton(
+          onPressed: super.enabled!.value
+              ? () {
+                  if (super.dismissOnClicked && Navigator.canPop(context)) {
+                    Navigator.pop(context);
+                    if (super.dismissCallback != null) {
+                      super.dismissCallback!();
+                    }
+                  }
+                  proc();
+                }
+              : null,
+          child: Container(
+            padding: padding,
+            alignment: AlignmentDirectional.centerStart,
+            constraints:
+                BoxConstraints(minHeight: conf.height, maxHeight: conf.height),
+            child: childBuilder(
+                super.enabled!.value ? enabledStyle(context) : disabledStyle()),
+          ),
+        )));
+  }
+
+  @override
+  List<mod_menu.PopupMenuEntry<T>> build(
+      BuildContext context, MenuConfig conf) {
+    return [
+      mod_menu.PopupMenuItem(
+        padding: EdgeInsets.zero,
+        height: conf.height,
+        child: _buildChild(context, conf),
+      )
+    ];
+  }
+}
+
+class CustomPopupMenuTheme {
+  static const Color commonColor = MyTheme.accent;
+  // kMinInteractiveDimension
+  static const double height = 20.0;
+  static const double dividerHeight = 3.0;
+}

flutter/lib/desktop/widgets/refresh_wrapper.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/main.dart';
+import 'package:get/get.dart';
+
+class RefreshWrapper extends StatefulWidget {
+  final Widget Function(BuildContext context) builder;
+
+  const RefreshWrapper({super.key, required this.builder});
+
+  @override
+  State<RefreshWrapper> createState() => RefreshWrapperState();
+
+  static RefreshWrapperState? of(BuildContext context) {
+    final state = context.findAncestorStateOfType<RefreshWrapperState>();
+    if (state == null) {
+      debugPrint(
+          "RefreshWrapperState not exists in this context, perhaps RefreshWrapper is not exists?");
+    }
+    return state;
+  }
+}
+
+class RefreshWrapperState extends State<RefreshWrapper> {
+  @override
+  Widget build(BuildContext context) {
+    return widget.builder(context);
+  }
+
+  rebuild() {
+    debugPrint("=====Global State Rebuild (win-${kWindowId ?? 'main'})=====");
+    if (Get.context != null) {
+      (context as Element).visitChildren(_rebuildElement);
+    }
+    // Synchronize the window theme of the system.
+    updateSystemWindowTheme();
+    setState(() {});
+  }
+
+  /// set root tree dirty to trigger global rebuild
+  void _rebuildElement(Element el) {
+    el.markNeedsBuild();
+    el.visitChildren(_rebuildElement);
+  }
+}

flutter/lib/desktop/widgets/titlebar_widget.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+const sidebarColor = Color(0xFF0C6AF6);
+const backgroundStartColor = Color(0xFF0583EA);
+const backgroundEndColor = Color(0xFF0697EA);
+
+class DesktopTitleBar extends StatelessWidget {
+  final Widget? child;
+
+  const DesktopTitleBar({Key? key, this.child}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [backgroundStartColor, backgroundEndColor],
+            stops: [0.0, 1.0]),
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            child: child ?? Offstage(),
+          )
+        ],
+      ),
+    );
+  }
+}

flutter/lib/desktop/widgets/update_progress.dart

@@ -0,0 +1,267 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
+import 'package:get/get.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+final _isExtracting = false.obs;
+
+void handleUpdate(String releasePageUrl) {
+  _isExtracting.value = false;
+  String downloadUrl = releasePageUrl.replaceAll('tag', 'download');
+  String version = downloadUrl.substring(downloadUrl.lastIndexOf('/') + 1);
+  final String downloadFile =
+      bind.mainGetCommonSync(key: 'download-file-$version');
+  if (downloadFile.startsWith('error:')) {
+    final error = downloadFile.replaceFirst('error:', '');
+    msgBox(gFFI.sessionId, 'custom-nocancel-nook-hasclose', 'Error', error,
+        releasePageUrl, gFFI.dialogManager);
+    return;
+  }
+  downloadUrl = '$downloadUrl/$downloadFile';
+
+  SimpleWrapper downloadId = SimpleWrapper('');
+  SimpleWrapper<VoidCallback> onCanceled = SimpleWrapper(() {});
+  gFFI.dialogManager.dismissAll();
+  gFFI.dialogManager.show((setState, close, context) {
+    return CustomAlertDialog(
+        title: Obx(() => Text(translate(_isExtracting.isTrue
+            ? 'Preparing for installation ...'
+            : 'Downloading {$appName}'))),
+        content:
+            UpdateProgress(releasePageUrl, downloadUrl, downloadId, onCanceled)
+                .marginSymmetric(horizontal: 8)
+                .paddingOnly(top: 12),
+        actions: [
+          if (_isExtracting.isFalse) dialogButton(translate('Cancel'), onPressed: () async {
+            onCanceled.value();
+            await bind.mainSetCommon(
+                key: 'cancel-downloader', value: downloadId.value);
+            // Wait for the downloader to be removed.
+            for (int i = 0; i < 10; i++) {
+              await Future.delayed(const Duration(milliseconds: 300));
+              final isCanceled = 'error:Downloader not found' ==
+                  await bind.mainGetCommon(
+                      key: 'download-data-${downloadId.value}');
+              if (isCanceled) {
+                break;
+              }
+            }
+            close();
+          }, isOutline: true),
+        ]);
+  });
+}
+
+class UpdateProgress extends StatefulWidget {
+  final String releasePageUrl;
+  final String downloadUrl;
+  final SimpleWrapper downloadId;
+  final SimpleWrapper onCanceled;
+  UpdateProgress(
+      this.releasePageUrl, this.downloadUrl, this.downloadId, this.onCanceled,
+      {Key? key})
+      : super(key: key);
+
+  @override
+  State<UpdateProgress> createState() => UpdateProgressState();
+}
+
+class UpdateProgressState extends State<UpdateProgress> {
+  Timer? _timer;
+  int? _totalSize;
+  int _downloadedSize = 0;
+  int _getDataFailedCount = 0;
+  final String _eventKeyDownloadNewVersion = 'download-new-version';
+  final String _eventKeyExtractUpdateDmg = 'extract-update-dmg';
+
+  @override
+  void initState() {
+    super.initState();
+    widget.onCanceled.value = () {
+      cancelQueryTimer();
+    };
+    platformFFI.registerEventHandler(_eventKeyDownloadNewVersion,
+        _eventKeyDownloadNewVersion, handleDownloadNewVersion,
+        replace: true);
+    bind.mainSetCommon(key: 'download-new-version', value: widget.downloadUrl);
+    if (isMacOS) {
+      platformFFI.registerEventHandler(_eventKeyExtractUpdateDmg,
+          _eventKeyExtractUpdateDmg, handleExtractUpdateDmg,
+          replace: true);
+    }
+  }
+
+  @override
+  void dispose() {
+    cancelQueryTimer();
+    platformFFI.unregisterEventHandler(
+        _eventKeyDownloadNewVersion, _eventKeyDownloadNewVersion);
+    if (isMacOS) {
+      platformFFI.unregisterEventHandler(
+          _eventKeyExtractUpdateDmg, _eventKeyExtractUpdateDmg);
+    }
+    super.dispose();
+  }
+
+  void cancelQueryTimer() {
+    _timer?.cancel();
+    _timer = null;
+  }
+
+  Future<void> handleDownloadNewVersion(Map<String, dynamic> evt) async {
+    if (evt.containsKey('id')) {
+      widget.downloadId.value = evt['id'] as String;
+      _timer = Timer.periodic(const Duration(milliseconds: 300), (timer) {
+        _updateDownloadData();
+      });
+    } else {
+      if (evt.containsKey('error')) {
+        _onError(evt['error'] as String);
+      } else {
+        // unreachable
+        _onError('$evt');
+      }
+    }
+  }
+
+  // `isExtractDmg` is true when handling extract-update-dmg event.
+  // It's a rare case that the dmg file is corrupted and cannot be extracted.
+  void _onError(String error, {bool isExtractDmg = false}) {
+    cancelQueryTimer();
+
+    debugPrint(
+        '${isExtractDmg ? "Extract" : "Download"} new version error: $error');
+    final msgBoxType = 'custom-nocancel-nook-hasclose';
+    final msgBoxTitle = 'Error';
+    final msgBoxText = 'download-new-version-failed-tip';
+    final dialogManager = gFFI.dialogManager;
+
+    close() {
+      dialogManager.dismissAll();
+    }
+
+    jumplink() {
+      launchUrl(Uri.parse(widget.releasePageUrl));
+      dialogManager.dismissAll();
+    }
+
+    retry() {
+      dialogManager.dismissAll();
+      handleUpdate(widget.releasePageUrl);
+    }
+
+    final List<Widget> buttons = [
+      dialogButton('Download', onPressed: jumplink),
+      if (!isExtractDmg) dialogButton('Retry', onPressed: retry),
+      dialogButton('Close', onPressed: close),
+    ];
+    dialogManager.dismissAll();
+    dialogManager.show(
+      (setState, close, context) => CustomAlertDialog(
+        title: null,
+        content: SelectionArea(
+            child: msgboxContent(msgBoxType, msgBoxTitle, msgBoxText)),
+        actions: buttons,
+      ),
+      tag: '$msgBoxType-$msgBoxTitle-$msgBoxTitle',
+    );
+  }
+
+  void _updateDownloadData() {
+    String err = '';
+    String downloadData =
+        bind.mainGetCommonSync(key: 'download-data-${widget.downloadId.value}');
+    if (downloadData.startsWith('error:')) {
+      err = downloadData.substring('error:'.length);
+    } else {
+      try {
+        jsonDecode(downloadData).forEach((key, value) {
+          if (key == 'total_size') {
+            if (value != null && value is int) {
+              _totalSize = value;
+            }
+          } else if (key == 'downloaded_size') {
+            _downloadedSize = value as int;
+          } else if (key == 'error') {
+            if (value != null) {
+              err = value.toString();
+            }
+          }
+        });
+      } catch (e) {
+        _getDataFailedCount += 1;
+        debugPrint(
+            'Failed to get download data ${widget.downloadUrl}, error $e');
+        if (_getDataFailedCount > 3) {
+          err = e.toString();
+        }
+      }
+    }
+    if (err != '') {
+      _onError(err);
+    } else {
+      if (_totalSize != null && _downloadedSize >= _totalSize!) {
+        cancelQueryTimer();
+        bind.mainSetCommon(
+            key: 'remove-downloader', value: widget.downloadId.value);
+        if (_totalSize == 0) {
+          _onError('The download file size is 0.');
+        } else {
+          setState(() {});
+          if (isMacOS) {
+            bind.mainSetCommon(
+                key: 'extract-update-dmg', value: widget.downloadUrl);
+            _isExtracting.value = true;
+          } else {
+            updateMsgBox();
+          }
+        }
+      } else {
+        setState(() {});
+      }
+    }
+  }
+
+  void updateMsgBox() {
+    msgBox(
+      gFFI.sessionId,
+      'custom-nocancel',
+      '{$appName} Update',
+      '{$appName}-to-update-tip',
+      '',
+      gFFI.dialogManager,
+      onSubmit: () {
+        debugPrint('Downloaded, update to new version now');
+        bind.mainSetCommon(key: 'update-me', value: widget.downloadUrl);
+      },
+      submitTimeout: 5,
+    );
+  }
+
+  Future<void> handleExtractUpdateDmg(Map<String, dynamic> evt) async {
+    _isExtracting.value = false;
+    if (evt.containsKey('err') && (evt['err'] as String).isNotEmpty) {
+      _onError(evt['err'] as String, isExtractDmg: true);
+    } else {
+      updateMsgBox();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    getValue() => _totalSize == null
+        ? 0.0
+        : (_totalSize == 0 ? 1.0 : _downloadedSize / _totalSize!);
+    return LinearProgressIndicator(
+      value: _isExtracting.isTrue ? null : getValue(),
+      minHeight: 20,
+      borderRadius: BorderRadius.circular(5),
+      backgroundColor: Colors.grey[300],
+      valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue),
+    );
+  }
+}