From 964a69b5f1ab6a5e39e97441684312de82c46ac2 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 22 Sep 2026 18:04:46 +0800
Subject: [PATCH] feat: improve mobile connection setup

---
 ui/components/ConnectForm/connectForm.vue     | 117 ++++++++++++------
 .../ConnectForm/connectMethodPicker.vue       |   2 +-
 ui/components/ConnectForm/fields.vue          | 117 ++++++++++++------
 ui/components/Modal/connectionFormModal.vue   |  61 ++++++++-
 .../Workspace/connectionSetupPane.vue         |  97 +++++++++++++--
 .../Workspace/useConnectionSetupDrag.test.ts  |  18 ++-
 .../Workspace/useConnectionSetupDrag.ts       |   3 +-
 ui/composables/useConnectMethods.test.ts      |  75 +++++++++--
 ui/composables/useConnectMethods.ts           |  11 +-
 ui/utils/runtime.ts                           |   7 ++
 10 files changed, 397 insertions(+), 111 deletions(-)

diff --git a/ui/components/ConnectForm/connectForm.vue b/ui/components/ConnectForm/connectForm.vue
index 757de38ed..1076bb9a9 100644
--- a/ui/components/ConnectForm/connectForm.vue
+++ b/ui/components/ConnectForm/connectForm.vue
@@ -181,7 +181,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col gap-4" :class="{ 'connect-form--island': modernIsland }">
+  <div class="connect-form flex min-h-0 flex-col gap-4" :class="{ 'connect-form--island': modernIsland }">
     <div class="protocol-tabs-track">
       <div class="protocol-tabs">
         <button
@@ -197,38 +197,41 @@ watch(
       </div>
     </div>
 
-    <div class="flex flex-col gap-4">
-      <ConnectAccountFields
-        v-model:account="selectedAccount"
-        v-model:manual-username="localManualUsername"
-        v-model:manual-password="localManualPassword"
-        v-model:personal-credential-id="localPersonalCredentialId"
-        v-model:personal-credential-version="localPersonalCredentialVersion"
-        v-model:personal-credential-secret-type="localPersonalCredentialSecretType"
-        v-model:save-personal-credential="localSavePersonalCredential"
-        v-model:dynamic-password="localDynamicPassword"
-        v-model:remember-secret="localRememberSecret"
-        :accounts="accounts"
-        :asset-type="assetType"
-        :personal-credentials="personalCredentials || []"
-        :personal-credentials-loading="personalCredentialsLoading"
-        :personal-credentials-loaded="personalCredentialsLoaded"
-        :personal-credentials-load-failed="personalCredentialsLoadFailed"
-      />
-      <ConnectMethodPicker
-        v-model:connect-method="localConnectMethod"
-        :protocol="selectedProtocol"
-        :methods="availableConnectMethods"
-      />
-      <ConnectAdvancedOptions
-        v-model:connect-options="localConnectOptions"
-        :protocol="selectedProtocol"
-        :component="selectedConnectMethodComponent"
-        :connect-method="selectedConnectMethodValue"
-        :has-x-pack="props.hasXPack"
-        :applet-client-enabled="props.appletClientEnabled"
-        :connection-token-reusable="props.connectionTokenReusable"
-      />
+    <div class="connect-form-body">
+      <div class="connect-form-controls flex flex-col gap-4">
+        <ConnectAccountFields
+          v-model:account="selectedAccount"
+          v-model:manual-username="localManualUsername"
+          v-model:manual-password="localManualPassword"
+          v-model:personal-credential-id="localPersonalCredentialId"
+          v-model:personal-credential-version="localPersonalCredentialVersion"
+          v-model:personal-credential-secret-type="localPersonalCredentialSecretType"
+          v-model:save-personal-credential="localSavePersonalCredential"
+          v-model:dynamic-password="localDynamicPassword"
+          v-model:remember-secret="localRememberSecret"
+          :accounts="accounts"
+          :asset-type="assetType"
+          :personal-credentials="personalCredentials || []"
+          :personal-credentials-loading="personalCredentialsLoading"
+          :personal-credentials-loaded="personalCredentialsLoaded"
+          :personal-credentials-load-failed="personalCredentialsLoadFailed"
+        />
+        <ConnectMethodPicker
+          v-model:connect-method="localConnectMethod"
+          :protocol="selectedProtocol"
+          :methods="availableConnectMethods"
+        />
+        <ConnectAdvancedOptions
+          v-model:connect-options="localConnectOptions"
+          :protocol="selectedProtocol"
+          :component="selectedConnectMethodComponent"
+          :connect-method="selectedConnectMethodValue"
+          :has-x-pack="props.hasXPack"
+          :applet-client-enabled="props.appletClientEnabled"
+          :connection-token-reusable="props.connectionTokenReusable"
+        />
+      </div>
+      <slot />
     </div>
   </div>
 </template>
@@ -236,14 +239,20 @@ watch(
 <style scoped>
 .protocol-tabs-track {
   display: flex;
-  justify-content: flex-start;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.75rem;
   border-bottom: 1px solid var(--app-border);
 }
 
 .protocol-tabs {
   display: inline-flex;
   width: fit-content;
+  min-width: 0;
   max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  align-self: stretch;
   align-items: flex-end;
   justify-content: flex-start;
   gap: 0.25rem;
@@ -253,7 +262,7 @@ watch(
   position: relative;
   flex: 0 0 auto;
   cursor: pointer;
-  margin-bottom: -1px;
+  margin-bottom: 0;
   border: 0;
   background: transparent;
   padding: 0.25rem 1.25rem 0.375rem;
@@ -272,7 +281,7 @@ watch(
   content: "";
   position: absolute;
   right: 0;
-  bottom: -1px;
+  bottom: 0;
   left: 0;
   height: 2px;
   background: var(--ui-primary);
@@ -299,4 +308,40 @@ watch(
   border-radius: var(--workspace-island-radius) var(--workspace-island-radius) 0 0;
   background: var(--theme-accent);
 }
+
+@media (max-width: 767px), (max-height: 600px) {
+  .connect-form {
+    flex: 1;
+    gap: 0.5rem;
+    overflow: hidden;
+  }
+
+  .protocol-tabs {
+    flex: 1;
+    overscroll-behavior-x: contain;
+  }
+
+  .protocol-tab-button,
+  .connect-form--island .protocol-tab-button {
+    min-height: 44px;
+    padding-inline: 12px;
+  }
+
+  .connect-form-body {
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    padding: 2px 2px 8px;
+    scroll-padding-block: 8px;
+  }
+
+  .connect-form-controls {
+    gap: 0.75rem;
+  }
+
+  .connect-form-controls :deep(input:not([type="checkbox"]):not([type="radio"])),
+  .connect-form-controls :deep(button[role="combobox"]) {
+    min-height: 44px;
+  }
+}
 </style>
diff --git a/ui/components/ConnectForm/connectMethodPicker.vue b/ui/components/ConnectForm/connectMethodPicker.vue
index 228beef60..e224bdc7d 100644
--- a/ui/components/ConnectForm/connectMethodPicker.vue
+++ b/ui/components/ConnectForm/connectMethodPicker.vue
@@ -287,7 +287,7 @@ async function openProtocolApplicationSettings() {
           orientation="horizontal"
           :ui="{
             fieldset: 'flex flex-wrap gap-2',
-            item: 'rounded-[length:var(--app-radius)] px-2 py-1.5 hover:bg-[var(--app-hover-soft)]'
+            item: 'items-center rounded-[length:var(--app-radius)] px-2 py-1.5 hover:bg-[var(--app-hover-soft)]'
           }"
         />
         <div
diff --git a/ui/components/ConnectForm/fields.vue b/ui/components/ConnectForm/fields.vue
index a18c8346e..c0ce7609e 100644
--- a/ui/components/ConnectForm/fields.vue
+++ b/ui/components/ConnectForm/fields.vue
@@ -25,6 +25,7 @@ const props = withDefaults(
     submitLabel: string;
     submitting?: boolean;
     downloadingRdp?: boolean;
+    headerActionTarget?: HTMLElement | null;
   }>(),
   {
     assetType: "assets",
@@ -246,7 +247,19 @@ watchDebounced(
 </script>
 
 <template>
-  <div @keydown.enter.prevent="submit">
+  <div class="connection-form-fields" @keydown.enter.prevent="submit">
+    <Teleport v-if="headerActionTarget" :to="headerActionTarget">
+      <UButton
+        :label="props.submitLabel"
+        :loading="props.submitting && !props.downloadingRdp"
+        :disabled="submitDisabled"
+        color="primary"
+        variant="outline"
+        size="xs"
+        class="connection-form-mobile-submit h-7 shrink-0 justify-center px-2.5"
+        @click="submit"
+      />
+    </Teleport>
     <ConnectForm
       v-model:protocol="draft.protocol"
       v-model:account="draft.account"
@@ -271,43 +284,69 @@ watchDebounced(
       :has-x-pack="hasXPack"
       :applet-client-enabled="appletClientEnabled === true"
       :connection-token-reusable="connectionTokenReusable"
-    />
-    <div class="mt-4">
-      <UCheckbox
-        v-model="draft.rememberSelection"
-        icon="i-lucide-check"
-        :label="t('EditModal.RememberSelection')"
-        :description="t('EditModal.RememberSelectionDescription')"
-        :ui="{ description: 'text-xs leading-5' }"
-      />
-    </div>
-    <p v-if="methodDisabled" class="mt-4 text-xs text-[var(--app-muted)]">
-      {{ t("ConnectError.MethodDisabled") }}
-    </p>
-    <div class="mt-6 mb-2 flex flex-wrap gap-2">
-      <UButton
-        :label="submitLabel"
-        :loading="props.submitting && !props.downloadingRdp"
-        :disabled="submitDisabled"
-        :size="modernIsland ? 'md' : 'lg'"
-        class="flex-1 justify-center"
-        :class="modernIsland ? '' : 'uppercase tracking-[0.08em]'"
-        @click="submit"
-      />
-      <UButton
-        v-if="rdpDownloadMethod"
-        type="button"
-        icon="i-lucide-download"
-        color="neutral"
-        variant="outline"
-        :label="t('EditModal.DownloadRdpFile')"
-        :loading="props.downloadingRdp"
-        :disabled="downloadDisabled"
-        :size="modernIsland ? 'md' : 'lg'"
-        class="flex-1 justify-center"
-        @keydown.enter.stop
-        @click="downloadRdp"
-      />
-    </div>
+    >
+      <div class="connection-form-remember mt-4">
+        <UCheckbox
+          v-model="draft.rememberSelection"
+          icon="i-lucide-check"
+          :label="t('EditModal.RememberSelection')"
+          :description="t('EditModal.RememberSelectionDescription')"
+          :ui="{ description: 'text-xs leading-5' }"
+        />
+      </div>
+      <p v-if="methodDisabled" class="mt-4 text-xs text-[var(--app-muted)]">
+        {{ t("ConnectError.MethodDisabled") }}
+      </p>
+      <div class="connection-form-actions mt-6 mb-2 flex flex-wrap gap-2">
+        <UButton
+          :label="submitLabel"
+          :loading="props.submitting && !props.downloadingRdp"
+          :disabled="submitDisabled"
+          :size="modernIsland ? 'md' : 'lg'"
+          class="connection-form-submit flex-1 justify-center"
+          :class="modernIsland ? '' : 'uppercase tracking-[0.08em]'"
+          @click="submit"
+        />
+        <UButton
+          v-if="rdpDownloadMethod"
+          type="button"
+          icon="i-lucide-download"
+          color="neutral"
+          variant="outline"
+          :label="t('EditModal.DownloadRdpFile')"
+          :loading="props.downloadingRdp"
+          :disabled="downloadDisabled"
+          :size="modernIsland ? 'md' : 'lg'"
+          class="flex-1 justify-center"
+          @keydown.enter.stop
+          @click="downloadRdp"
+        />
+      </div>
+    </ConnectForm>
   </div>
 </template>
+
+<style scoped>
+.connection-form-mobile-submit {
+  display: none;
+}
+
+@media (max-width: 767px), (max-height: 600px) {
+  .connection-form-fields {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .connection-form-mobile-submit {
+    display: inline-flex;
+  }
+
+  .connection-form-remember,
+  .connection-form-actions {
+    margin-top: 0.75rem;
+  }
+}
+</style>
diff --git a/ui/components/Modal/connectionFormModal.vue b/ui/components/Modal/connectionFormModal.vue
index 9d31bbf7f..cbd95164e 100644
--- a/ui/components/Modal/connectionFormModal.vue
+++ b/ui/components/Modal/connectionFormModal.vue
@@ -23,6 +23,7 @@ const {
 const currentAsset = ref<AssetItem | null>(null);
 const loading = ref(false);
 const downloadingRdp = shallowRef(false);
+const headerActionTarget = shallowRef<HTMLElement | null>(null);
 let loadSequence = 0;
 
 const modalTitle = computed(() => {
@@ -97,17 +98,20 @@ watch(
     :dismissible="false"
     :title="modalTitle"
     :ui="{
-      content: 'w-[calc(100vw-3rem)] max-w-2xl',
+      content: 'connection-form-modal w-[calc(100vw-3rem)] max-w-2xl',
       header: 'min-h-12 p-3 sm:px-4',
-      title: 'text-sm leading-5',
-      close: 'top-2 end-2 size-7 p-1',
-      body: 'pt-1 sm:pt-1'
+      title: 'connection-form-modal-title text-sm leading-5',
+      close: 'connection-form-modal-close top-2 end-2 size-7 p-1',
+      body: 'connection-form-modal-body pt-1 sm:pt-1'
     }"
     @update:open="updateOpen"
   >
+    <template #actions>
+      <div ref="headerActionTarget" class="connection-form-modal-action-target" />
+    </template>
     <template #body>
       <ConnectFormSkeleton v-if="loading" />
-      <div v-else-if="currentAsset">
+      <div v-else-if="currentAsset" class="connection-form-modal-fields">
         <ConnectFormFields
           v-model:draft="draft"
           :asset="currentAsset"
@@ -119,6 +123,7 @@ watch(
           :submit-label="t('Common.Connect')"
           :submitting="downloadingRdp"
           :downloading-rdp="downloadingRdp"
+          :header-action-target="headerActionTarget"
           asset-type="assets"
           @submit="confirm"
           @download-rdp="downloadRdp"
@@ -127,3 +132,49 @@ watch(
     </template>
   </UModal>
 </template>
+
+<style>
+.connection-form-modal-action-target {
+  display: none;
+}
+
+@media (max-width: 767px), (max-height: 600px) {
+  .connection-form-modal-action-target {
+    display: flex;
+    flex-shrink: 0;
+    order: -1;
+    margin-inline-end: 4px;
+  }
+
+  .connection-form-modal {
+    width: calc(100vw - 1rem);
+    height: calc(100dvh - 1rem);
+    max-height: calc(100dvh - 1rem);
+  }
+
+  .connection-form-modal-body,
+  .connection-form-modal-fields {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .connection-form-modal-body {
+    padding: 4px 12px 8px;
+  }
+
+  .connection-form-modal-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .connection-form-modal-close {
+    position: static;
+    flex-shrink: 0;
+    margin-inline-start: 4px;
+  }
+}
+</style>
diff --git a/ui/components/Workspace/connectionSetupPane.vue b/ui/components/Workspace/connectionSetupPane.vue
index f0e0f2c32..7f49f9cb4 100644
--- a/ui/components/Workspace/connectionSetupPane.vue
+++ b/ui/components/Workspace/connectionSetupPane.vue
@@ -236,10 +236,16 @@ watch(
   }
 );
 
+const compactLayout = useMediaQuery("(max-width: 767px), (max-height: 600px)");
 const dragArea = shallowRef<HTMLElement | null>(null);
 const dialogGroup = shallowRef<HTMLElement | null>(null);
 const dragHandle = shallowRef<HTMLElement | null>(null);
-const { isDragging, style: dialogPosition } = useConnectionSetupDrag(dragArea, dialogGroup, dragHandle);
+const headerActionTarget = shallowRef<HTMLElement | null>(null);
+const { isDragging, style: dialogPosition } = useConnectionSetupDrag(
+  dragArea,
+  dialogGroup,
+  computed(() => (compactLayout.value ? null : dragHandle.value))
+);
 
 const closing = ref(false);
 const dialogVisible = computed(() => !closing.value && Boolean(currentAsset.value || props.tab.setupAsset));
@@ -263,7 +269,7 @@ onMounted(loadAsset);
 
 <template>
   <div
-    class="h-full min-h-0 w-full overflow-auto px-4 py-4 sm:px-10"
+    class="connection-setup-stage h-full min-h-0 w-full overflow-auto px-4 py-4 sm:px-10"
     :class="[
       modernIsland ? 'connection-setup-stage--island' : 'bg-(--workspace-surface-background)',
       { 'is-leaving': modernIsland && closing }
@@ -276,9 +282,9 @@ onMounted(loadAsset);
     >
       <div
         ref="dialogGroup"
-        class="flex shrink-0 flex-col items-center gap-8"
+        class="connection-setup-group flex shrink-0 flex-col items-center gap-8"
         :class="modernIsland ? 'w-[min(520px,100%)]' : 'w-[min(640px,100%)]'"
-        :style="dialogPosition"
+        :style="compactLayout ? undefined : dialogPosition"
       >
         <Transition :name="modernIsland ? 'island-dialog' : ''" :appear="modernIsland">
           <section
@@ -293,10 +299,10 @@ onMounted(loadAsset);
             <div
               ref="dragHandle"
               role="group"
-              tabindex="0"
-              :aria-label="t('ConnectionSetup.MoveDialog')"
-              :title="t('ConnectionSetup.MoveDialog')"
-              class="flex touch-none items-center justify-between gap-3 border-b px-4 outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--app-focus-ring)"
+              :tabindex="compactLayout ? undefined : 0"
+              :aria-label="compactLayout ? undefined : t('ConnectionSetup.MoveDialog')"
+              :title="compactLayout ? undefined : t('ConnectionSetup.MoveDialog')"
+              class="connection-setup-header flex shrink-0 touch-none items-center justify-between gap-3 border-b px-4 outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--app-focus-ring)"
               :class="[
                 modernIsland
                   ? 'h-10 border-[color-mix(in_srgb,var(--theme-fg)_14%,transparent)]'
@@ -304,10 +310,13 @@ onMounted(loadAsset);
                 isDragging ? 'cursor-grabbing' : 'cursor-grab'
               ]"
             >
-              <div class="flex min-w-0 items-center gap-2">
+              <div class="flex min-w-0 flex-1 items-center gap-2">
+                <div ref="headerActionTarget" class="contents" />
                 <span class="truncate font-semibold text-(--app-fg)" :class="modernIsland ? 'text-[13px]' : 'text-sm'">
-                  {{ t("ContextMenu.Connect") }}
-                  {{ modernIsland ? " · " : " - " }}
+                  <template v-if="!compactLayout || loading || launchSuccessVisible">
+                    {{ t("ContextMenu.Connect") }}
+                    {{ modernIsland ? " · " : " - " }}
+                  </template>
                   <span class="font-ui-mono font-medium">{{ assetAddress }}</span>
                 </span>
                 <UBadge
@@ -320,6 +329,7 @@ onMounted(loadAsset);
                 />
               </div>
               <UButton
+                class="connection-setup-close shrink-0"
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-x"
@@ -330,8 +340,17 @@ onMounted(loadAsset);
               />
             </div>
 
-            <div class="flex min-h-75 flex-col" :class="modernIsland ? '' : 'bg-(--app-surface-panel-strong)'">
-              <div class="min-h-0 flex-1 overflow-auto py-4 pt-2" :class="modernIsland ? 'px-4' : 'px-6'">
+            <div
+              class="connection-setup-body flex min-h-75 flex-col"
+              :class="modernIsland ? '' : 'bg-(--app-surface-panel-strong)'"
+            >
+              <div
+                class="connection-setup-form min-h-0 flex-1 overflow-auto py-4 pt-2"
+                :class="[
+                  modernIsland ? 'px-4' : 'px-6',
+                  { 'connection-setup-form--fields': !loading && !launchSuccessVisible && currentAsset }
+                ]"
+              >
                 <ConnectFormSkeleton v-if="loading" />
                 <div v-else-if="launchSuccessVisible" class="flex min-h-full items-center justify-center py-6">
                   <section
@@ -405,6 +424,7 @@ onMounted(loadAsset);
                     :submit-label="externalClientLaunch ? t('ConnectionSetup.OpenInClient') : t('Common.Connect')"
                     :submitting="connecting"
                     :downloading-rdp="downloadingRdp"
+                    :header-action-target="headerActionTarget"
                     :disabled="connecting || !draft.protocol"
                     @submit="submit()"
                     @download-rdp="submit"
@@ -525,4 +545,55 @@ onMounted(loadAsset);
     0 1px 0 color-mix(in srgb, var(--app-surface-panel-strong) 78%, transparent) inset,
     0 16px 36px color-mix(in srgb, var(--app-fg) 5%, transparent);
 }
+
+@media (max-width: 767px), (max-height: 600px) {
+  .connection-setup-stage {
+    overflow: hidden;
+    padding: 8px;
+  }
+
+  .connection-setup-content,
+  .connection-setup-group {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .connection-setup-group {
+    width: min(768px, 100%);
+  }
+
+  .connection-setup-shell {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  .connection-setup-header {
+    height: 44px;
+    padding-inline: 12px;
+    touch-action: auto;
+    cursor: default;
+  }
+
+  .connection-setup-close {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .connection-setup-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .connection-setup-form {
+    padding: 4px 12px 8px;
+  }
+
+  .connection-setup-form--fields {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/ui/components/Workspace/useConnectionSetupDrag.test.ts b/ui/components/Workspace/useConnectionSetupDrag.test.ts
index 5d1afd68d..4e3f8c270 100644
--- a/ui/components/Workspace/useConnectionSetupDrag.test.ts
+++ b/ui/components/Workspace/useConnectionSetupDrag.test.ts
@@ -25,13 +25,10 @@ function setup() {
     hasPointerCapture: (id: number) => captured.has(id),
     releasePointerCapture: vi.fn((id: number) => captured.delete(id))
   });
+  const handleRef = shallowRef(handle as unknown as HTMLElement | null);
   const scope = effectScope();
   const state = scope.run(() =>
-    useConnectionSetupDrag(
-      shallowRef(area as HTMLElement),
-      shallowRef(panel as HTMLElement),
-      shallowRef(handle as unknown as HTMLElement)
-    )
+    useConnectionSetupDrag(shallowRef(area as HTMLElement), shallowRef(panel as HTMLElement), handleRef)
   )!;
   cleanups.push(() => scope.stop());
   function dispatch(type: string, properties: Record<string, unknown> = {}) {
@@ -50,7 +47,7 @@ function setup() {
     vi
       .mocked(useResizeObserver)
       .mock.calls.at(-1)![1]([], {} as ResizeObserver);
-  return { area, panel, handle, state, dispatch, resize, scope };
+  return { area, panel, handle, handleRef, state, dispatch, resize, scope };
 }
 
 it("moves from the current position without a jump and clamps all four edges", () => {
@@ -103,6 +100,15 @@ it("releases capture and removes listeners when the dialog unmounts", () => {
   expect(handle.releasePointerCapture).toHaveBeenCalledOnce();
 });
 
+it("releases an active drag when a compact layout removes the handle", () => {
+  const { handle, handleRef, state, dispatch } = setup();
+  dispatch("pointerdown");
+  expect(state.isDragging.value).toBe(true);
+  handleRef.value = null;
+  expect(state.isDragging.value).toBe(false);
+  expect(handle.releasePointerCapture).toHaveBeenCalledWith(1);
+});
+
 it("keeps the dialog in bounds after resizing or expanding while preserving hidden tab positions", () => {
   const { area, panel, state, dispatch, resize } = setup();
   dispatch("pointerdown");
diff --git a/ui/components/Workspace/useConnectionSetupDrag.ts b/ui/components/Workspace/useConnectionSetupDrag.ts
index bbcd053a9..ac6018d04 100644
--- a/ui/components/Workspace/useConnectionSetupDrag.ts
+++ b/ui/components/Workspace/useConnectionSetupDrag.ts
@@ -1,6 +1,6 @@
 import type { Ref } from "vue";
 import { useEventListener, useResizeObserver } from "@vueuse/core";
-import { computed, onScopeDispose, shallowRef } from "vue";
+import { computed, onScopeDispose, shallowRef, watch } from "vue";
 
 export function useConnectionSetupDrag(
   area: Ref<HTMLElement | null>,
@@ -75,6 +75,7 @@ export function useConnectionSetupDrag(
     event.stopPropagation();
   });
   useResizeObserver([area, dialog], () => move(offset.value.x, offset.value.y));
+  watch(handle, stop, { flush: "sync" });
   onScopeDispose(stop);
 
   return {
diff --git a/ui/composables/useConnectMethods.test.ts b/ui/composables/useConnectMethods.test.ts
index 7bb7d848f..c57248d7c 100644
--- a/ui/composables/useConnectMethods.test.ts
+++ b/ui/composables/useConnectMethods.test.ts
@@ -16,6 +16,16 @@ vi.mock("~/store/modules/userInfo", () => ({
   useUserInfoStore: vi.fn()
 }));
 
+const appletMethod = (value: string, label: string): ConnectMethod => ({
+  value,
+  label,
+  type: "applet",
+  icon: "",
+  disabled: false,
+  listen: "",
+  component: "tinker"
+});
+
 describe("connection method request reuse", () => {
   const scope = { currentSite: ref("https://site-a.example"), currentAccountId: ref("user-a"), orgId: ref("org-a") };
   const request = vi.fn();
@@ -92,16 +102,63 @@ describe("connection method request reuse", () => {
     await methods.fetchConnectMethods();
     expect(request).toHaveBeenCalledTimes(2);
   });
-});
 
-const appletMethod = (value: string, label: string): ConnectMethod => ({
-  value,
-  label,
-  type: "applet",
-  icon: "",
-  disabled: false,
-  listen: "",
-  component: "tinker"
+  it.each([
+    ["iPhone", "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X)", 5, false, true],
+    ["Android", "Mozilla/5.0 (Linux; Android 15; Pixel 9)", 5, false, true],
+    ["iPad", "Mozilla/5.0 (iPad; CPU OS 18_0 like Mac OS X)", 5, false, true],
+    ["iPad desktop mode", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)", 5, false, true],
+    ["Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)", 0, false, false],
+    ["Windows touch laptop", "Mozilla/5.0 (Windows NT 10.0; Win64; x64)", 10, false, false],
+    ["Electron", "Mozilla/5.0 (Linux; Android 15)", 5, true, false]
+  ])(
+    "filters local applications for %s without removing browser connection modes",
+    async (_name, userAgent, maxTouchPoints, desktop, mobile) => {
+      vi.stubGlobal("navigator", { userAgent, maxTouchPoints });
+      vi.stubGlobal("isDesktopRuntime", () => desktop);
+      const nativeMethods = ["native", "client", "local", "desktop", "NATIVE"].map((type) => ({
+        ...appletMethod(`${type}_client`, type),
+        type
+      }));
+      const web = { ...appletMethod("web_cli", "Web terminal"), type: "web", component: "koko" };
+      const remote = appletMethod("remote", "Remote application");
+      const virtual = { ...remote, value: "virtual", type: "virtual_app" };
+      request.mockResolvedValue({
+        ssh: [...nativeMethods, { ...remote, value: "native_app:ssh_client:putty" }, web, remote, virtual],
+        originals: []
+      });
+      const methods = await useConnectMethods().getMethodsForProtocol("ssh");
+      const values = methods.map((method) => method.value);
+      expect(values).toEqual(expect.arrayContaining([WEB_CLI_NATIVE_VALUE, "remote", "virtual"]));
+      for (const method of nativeMethods) expect(values.includes(method.value)).toBe(!mobile);
+      expect(values.includes("native_app:ssh_client:putty")).toBe(!mobile);
+      if (mobile) {
+        for (const remembered of ["native_client", "native_app:ssh_client:putty"]) {
+          expect(pickConnectMethod("ssh", methods, remembered, remembered)).toBe(WEB_CLI_NATIVE_VALUE);
+        }
+      }
+    }
+  );
+
+  it("returns no connection method when a mobile device only has local applications", async () => {
+    vi.stubGlobal("navigator", { userAgent: "iPhone", maxTouchPoints: 5 });
+    request.mockResolvedValue({
+      ssh: [{ ...appletMethod("ssh_client", "Application"), type: "native" }],
+      originals: []
+    });
+    const methods = await useConnectMethods().getMethodsForProtocol("ssh");
+    expect(methods).toEqual([]);
+    expect(pickConnectMethod("ssh", methods, "ssh_client", "ssh_client")).toBe("");
+  });
+
+  it("can read methods outside a browser without navigator", async () => {
+    vi.stubGlobal("navigator", undefined);
+    request.mockResolvedValue({
+      ssh: [{ ...appletMethod("ssh_client", "Application"), type: "native" }],
+      originals: []
+    });
+    expect(await useConnectMethods().getDefaultMethodForProtocol("ssh")).toBe("ssh_client");
+  });
 });
 
 describe("RemoteApp connection modes", () => {
diff --git a/ui/composables/useConnectMethods.ts b/ui/composables/useConnectMethods.ts
index 6cc6c7be5..0b38532a3 100644
--- a/ui/composables/useConnectMethods.ts
+++ b/ui/composables/useConnectMethods.ts
@@ -10,6 +10,7 @@ import {
   WEB_RDP_NATIVE_VALUE
 } from "~/shared/connectors/capabilities";
 import { useUserInfoStore } from "~/store/modules/userInfo";
+import { isMobileDevice } from "~/utils/runtime";
 
 export {
   K8S_NATIVE_VALUE,
@@ -380,6 +381,7 @@ export const useConnectMethods = () => {
 
   const getMethodsForProtocol = async (protocol: string): Promise<ConnectMethod[]> => {
     const allMethods = await fetchConnectMethods();
+    const mobileBrowser = !isDesktopRuntime() && isMobileDevice();
     const normalizedProtocol = protocol.trim().toLowerCase();
     const protocolMethods =
       Object.entries(allMethods).find(
@@ -387,7 +389,14 @@ export const useConnectMethods = () => {
       )?.[1] || [];
     const methodsWithFallback = withKokoWebFallback(normalizedProtocol, protocolMethods);
     return methodsWithFallback
-      .filter((method) => !method.disabled)
+      .filter(
+        (method) =>
+          !method.disabled &&
+          (!mobileBrowser ||
+            (!method.value.startsWith(LOCAL_APPLICATION_METHOD_PREFIX) &&
+              (BUILTIN_WORKSPACE_METHOD_VALUES.has(method.value) ||
+                !["native", "client", "local", "desktop"].includes(String(method.type || "").toLowerCase()))))
+      )
       .map((method) => ({
         ...method,
         label: method.label.startsWith("ConnectMethod.") ? t(method.label) : method.label
diff --git a/ui/utils/runtime.ts b/ui/utils/runtime.ts
index e6641c872..40b042b45 100644
--- a/ui/utils/runtime.ts
+++ b/ui/utils/runtime.ts
@@ -10,6 +10,13 @@ export const getDesktopRuntime = (): DesktopRuntime => {
 
 export const isDesktopRuntime = () => getDesktopRuntime() !== "web";
 export const isElectronRuntime = () => getDesktopRuntime() === "electron";
+export const isMobileDevice = () => {
+  const nav = globalThis.navigator;
+  return (
+    !!nav &&
+    (/Android|iPhone|iPad|iPod/i.test(nav.userAgent) || (/Macintosh/i.test(nav.userAgent) && nav.maxTouchPoints > 1))
+  );
+};
 export const pageLocation = () => window.location;
 
 export const getCookieValue = (name: string) => {