diff --git a/e2e/src/test/java/octopus/teamcity/e2e/dsl/TeamCityRest.java b/e2e/src/test/java/octopus/teamcity/e2e/dsl/TeamCityRest.java
index d904297d..82488ab0 100644
--- a/e2e/src/test/java/octopus/teamcity/e2e/dsl/TeamCityRest.java
+++ b/e2e/src/test/java/octopus/teamcity/e2e/dsl/TeamCityRest.java
@@ -287,6 +287,20 @@ public void addBuildInfoStepUsingConnection(
         json);
   }
 
+  /** Sets one property on an existing build step, as saving the step's form would. */
+  public void setStepProperty(
+      final String buildTypeId, final String stepId, final String name, final String value)
+      throws Exception {
+    final String path =
+        "/httpAuth/app/rest/buildTypes/" + buildTypeId + "/steps/" + stepId + "/parameters/" + name;
+    // This endpoint answers in plain text, so it refuses the JSON Accept header send() uses.
+    final Http.Response resp = request("PUT", baseUrl + path, "text/plain", "text/plain", value);
+    if (resp.statusCode() < 200 || resp.statusCode() >= 300) {
+      throw new IllegalStateException(
+          "PUT " + path + " -> " + resp.statusCode() + ": " + resp.body());
+    }
+  }
+
   /**
    * Adds an empty Create release (octopus.create.release) step; enough for the edit page to render.
    * Returns the generated runner id (e.g. {@code RUNNER_1}).
diff --git a/e2e/src/test/java/octopus/teamcity/e2e/test/OctopusSpacePickerUiTest.java b/e2e/src/test/java/octopus/teamcity/e2e/test/OctopusSpacePickerUiTest.java
new file mode 100644
index 00000000..d7048d81
--- /dev/null
+++ b/e2e/src/test/java/octopus/teamcity/e2e/test/OctopusSpacePickerUiTest.java
@@ -0,0 +1,328 @@
+package octopus.teamcity.e2e.test;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import java.util.List;
+
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.options.LoadState;
+import com.microsoft.playwright.options.WaitForSelectorState;
+import com.microsoft.playwright.options.WaitUntilState;
+import octopus.teamcity.e2e.dsl.OctopusTeamCityStack;
+import octopus.teamcity.e2e.dsl.PlaywrightUi;
+import octopus.teamcity.e2e.dsl.SharedStack;
+import octopus.teamcity.e2e.dsl.TeamCityRest;
+import org.junit.jupiter.api.Test;
+
+/**
+ * UI test for the space picker: the space name field suggests the connection's spaces, loaded from
+ * the Octopus container on their own, and choosing one stores the space's <em>id</em> rather than
+ * only its name. Anything else typed - such as a parameter reference - is kept as the name.
+ *
+ * <p>Storing the id is the whole point of the picker - a name breaks as soon as the space is
+ * renamed in Octopus, whereas the id does not.
+ */
+class OctopusSpacePickerUiTest {
+
+  @Test
+  void suggestsTheConnectionsSpacesAndStoresTheChosenId() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerIT", "Space picker IT");
+      // A connection with a real URL and key, so the lookup can actually succeed. The TeamCity
+      // server makes the call, so it needs the container-network URL.
+      final String connectionId =
+          tc.createOctopusConnection(
+              "SpacePickerIT",
+              "Real Octopus",
+              stack.octopusUrlForContainers(),
+              stack.octopusApiKey(),
+              "");
+      tc.createBuildType("SpacePickerIT_Release", "Create release", "SpacePickerIT");
+      final String runnerId = tc.addCreateReleaseStep("SpacePickerIT_Release");
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            openStep(page, stack, "SpacePickerIT_Release", runnerId);
+            // No connection yet, so there is nothing to suggest.
+            assertThat(status(page).innerText()).contains("Select a connection");
+            assertNoSpacesListed(page);
+
+            // Choosing the connection loads its spaces without any further click.
+            page.selectOption("#octopusConnectionId", new String[] {connectionId});
+            waitForSpaces(page);
+
+            // A fresh Octopus has the Default space, suggested as "<name> (<id>)".
+            assertThat(suggestions(page)).contains("Default (Spaces-1)");
+            page.locator("ul.ui-autocomplete li", new Page.LocatorOptions().setHasText("Default"))
+                .first()
+                .click();
+
+            assertThat(spaceId(page)).isEqualTo("Spaces-1");
+            assertThat(spaceName(page).inputValue()).isEqualTo("Default");
+          });
+    }
+  }
+
+  @Test
+  void keepsATypedNameAndStoresTheIdOnlyForAnExactMatch() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerTypedIT", "Space picker typed name IT");
+      final String connectionId =
+          tc.createOctopusConnection(
+              "SpacePickerTypedIT",
+              "Real Octopus",
+              stack.octopusUrlForContainers(),
+              stack.octopusApiKey(),
+              "");
+      tc.createBuildType("SpacePickerTypedIT_Release", "Create release", "SpacePickerTypedIT");
+      final String runnerId = tc.addCreateReleaseStep("SpacePickerTypedIT_Release");
+      tc.setStepProperty(
+          "SpacePickerTypedIT_Release", runnerId, "octopus_connection_id", connectionId);
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            openStep(page, stack, "SpacePickerTypedIT_Release", runnerId);
+            waitForSpaces(page);
+
+            // Typing narrows the suggestions to spaces whose name contains the text.
+            spaceName(page).fill("");
+            spaceName(page).pressSequentially("defa");
+            assertThat(suggestions(page)).containsExactly("Default (Spaces-1)");
+
+            // An exact name, in any case, picks the space.
+            spaceName(page).fill("default");
+            assertThat(spaceId(page)).isEqualTo("Spaces-1");
+
+            // After a %, TeamCity's parameters are suggested instead, and choosing one completes
+            // the reference.
+            spaceName(page).fill("");
+            spaceName(page).pressSequentially("%build.num");
+            page.locator(
+                    "ul.ui-autocomplete:visible li",
+                    new Page.LocatorOptions().setHasText("build.number"))
+                .first()
+                .click();
+            assertThat(spaceName(page).inputValue()).isEqualTo("%build.number%");
+            assertThat(spaceId(page)).isEmpty();
+
+            // A parameter reference is resolved when the build runs, so it is kept as the name and
+            // not checked against Octopus.
+            spaceName(page).fill("%octopus.space%");
+            spaceName(page).blur();
+            assertThat(spaceId(page)).isEmpty();
+            assertThat(missingSpace(page).isVisible()).isFalse();
+
+            // Any other name is kept as typed, and flagged.
+            spaceName(page).fill("Nowhere");
+            spaceName(page).blur();
+            assertThat(spaceId(page)).isEmpty();
+            assertThat(missingSpace(page).innerText())
+                .isEqualTo("No space named 'Nowhere' was found in Octopus.");
+          });
+    }
+  }
+
+  /**
+   * The parameter completion comes from TeamCity internals the picker calls into. If those change,
+   * the field must still suggest spaces and accept whatever is typed.
+   */
+  @Test
+  void stillSuggestsSpacesWhenTeamCitysParameterCompletionFails() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerBrokenIT", "Space picker broken completion IT");
+      final String connectionId =
+          tc.createOctopusConnection(
+              "SpacePickerBrokenIT",
+              "Real Octopus",
+              stack.octopusUrlForContainers(),
+              stack.octopusApiKey(),
+              "");
+      tc.createBuildType("SpacePickerBrokenIT_Release", "Create release", "SpacePickerBrokenIT");
+      final String runnerId = tc.addCreateReleaseStep("SpacePickerBrokenIT_Release");
+      tc.setStepProperty(
+          "SpacePickerBrokenIT_Release", runnerId, "octopus_connection_id", connectionId);
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            final List<String> pageErrors = new java.util.ArrayList<>();
+            page.onPageError(pageErrors::add);
+            openStep(page, stack, "SpacePickerBrokenIT_Release", runnerId);
+            waitForSpaces(page);
+            page.evaluate(
+                "() => { BS.AvailableParams.sliceForCompletion = function () {"
+                    + " throw new Error('changed in this TeamCity version'); };"
+                    + " BS.AvailableParams.sourceForElement = undefined; }");
+
+            spaceName(page).fill("");
+            spaceName(page).pressSequentially("%octo");
+            spaceName(page).fill("");
+            spaceName(page).pressSequentially("Def");
+            assertThat(suggestions(page)).containsExactly("Default (Spaces-1)");
+            spaceName(page).fill("%octopus.space%");
+            assertThat(spaceName(page).inputValue()).isEqualTo("%octopus.space%");
+            assertThat(pageErrors).isEmpty();
+          });
+    }
+  }
+
+  @Test
+  void flagsASavedSpaceThatOctopusDoesNotHave() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerMissingIT", "Space picker missing space IT");
+      final String connectionId =
+          tc.createOctopusConnection(
+              "SpacePickerMissingIT",
+              "Real Octopus",
+              stack.octopusUrlForContainers(),
+              stack.octopusApiKey(),
+              "");
+      tc.createBuildType("SpacePickerMissingIT_Release", "Create release", "SpacePickerMissingIT");
+      final String runnerId = tc.addCreateReleaseStep("SpacePickerMissingIT_Release");
+      tc.setStepProperty(
+          "SpacePickerMissingIT_Release", runnerId, "octopus_connection_id", connectionId);
+      tc.setStepProperty(
+          "SpacePickerMissingIT_Release", runnerId, "octopus_space_id", "Spaces-999");
+      tc.setStepProperty("SpacePickerMissingIT_Release", runnerId, "octopus_space_name", "Gone");
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            openStep(page, stack, "SpacePickerMissingIT_Release", runnerId);
+            waitForSpaces(page);
+
+            assertThat(missingSpace(page).innerText())
+                .isEqualTo(
+                    "The saved space 'Gone' (Spaces-999) was not found. Please enter the space"
+                        + " name.");
+            // The saved setting is left alone until someone changes it.
+            assertThat(spaceId(page)).isEqualTo("Spaces-999");
+            assertThat(spaceName(page).inputValue()).isEqualTo("Gone");
+          });
+    }
+  }
+
+  @Test
+  void switchingConnectionDropsTheSavedSpaceId() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerSwitchIT", "Space picker connection switch IT");
+      final String connectionId =
+          tc.createOctopusConnection(
+              "SpacePickerSwitchIT",
+              "Real Octopus",
+              stack.octopusUrlForContainers(),
+              stack.octopusApiKey(),
+              "");
+      tc.createBuildType("SpacePickerSwitchIT_Release", "Create release", "SpacePickerSwitchIT");
+      final String runnerId = tc.addCreateReleaseStep("SpacePickerSwitchIT_Release");
+      tc.setStepProperty(
+          "SpacePickerSwitchIT_Release", runnerId, "octopus_connection_id", connectionId);
+      tc.setStepProperty("SpacePickerSwitchIT_Release", runnerId, "octopus_space_id", "Spaces-1");
+      tc.setStepProperty("SpacePickerSwitchIT_Release", runnerId, "octopus_space_name", "Default");
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            openStep(page, stack, "SpacePickerSwitchIT_Release", runnerId);
+            waitForSpaces(page);
+            assertThat(spaceId(page)).isEqualTo("Spaces-1");
+
+            page.selectOption("#octopusConnectionId", new String[] {""});
+
+            assertThat(spaceId(page)).isEmpty();
+            assertThat(spaceName(page).inputValue()).isEqualTo("Default");
+          });
+    }
+  }
+
+  @Test
+  void connectionFormSuggestsTheConnectionsOwnSpaces() throws Exception {
+    try (final OctopusTeamCityStack stack = SharedStack.full()) {
+      final TeamCityRest tc = stack.rest();
+      tc.createProject("SpacePickerConnFormIT", "Space picker connection form IT");
+      tc.createOctopusConnection(
+          "SpacePickerConnFormIT",
+          "Picker Octopus",
+          stack.octopusUrlForContainers(),
+          stack.octopusApiKey(),
+          "");
+
+      PlaywrightUi.withLoggedInPage(
+          stack,
+          page -> {
+            page.navigate(
+                stack.tcBaseUrl()
+                    + "/admin/editProject.html?projectId=SpacePickerConnFormIT"
+                    + "&tab=oauthConnections");
+            page.waitForLoadState(LoadState.NETWORKIDLE);
+            page.locator("tr", new Page.LocatorOptions().setHasText("Picker Octopus"))
+                .locator("a:has-text(\"Edit\")")
+                .first()
+                .click();
+
+            waitForSpaces(page);
+            assertThat(suggestions(page)).contains("Default (Spaces-1)");
+          });
+    }
+  }
+
+  private static void openStep(
+      final Page page,
+      final OctopusTeamCityStack stack,
+      final String buildTypeId,
+      final String runnerId) {
+    page.navigate(
+        stack.tcBaseUrl()
+            + "/admin/editRunType.html?id=buildType:"
+            + buildTypeId
+            + "&runnerId="
+            + runnerId,
+        new Page.NavigateOptions().setWaitUntil(WaitUntilState.DOMCONTENTLOADED));
+    page.waitForLoadState(LoadState.NETWORKIDLE);
+  }
+
+  private static Locator status(final Page page) {
+    return page.locator("span.octopusSpaceStatus").first();
+  }
+
+  private static Locator spaceName(final Page page) {
+    return page.locator("#octopus_space_name").first();
+  }
+
+  private static String spaceId(final Page page) {
+    return page.locator("input[name='prop:octopus_space_id']").first().inputValue();
+  }
+
+  private static Locator missingSpace(final Page page) {
+    return page.locator("span.octopusSpaceMissing").first();
+  }
+
+  /** The by-id note is shown exactly when the connection's spaces have been listed. */
+  private static void waitForSpaces(final Page page) {
+    page.locator("span.octopusSpaceByIdNote")
+        .first()
+        .waitFor(
+            new Locator.WaitForOptions().setState(WaitForSelectorState.VISIBLE).setTimeout(60000));
+  }
+
+  private static void assertNoSpacesListed(final Page page) {
+    assertThat(spaceName(page).isVisible()).isTrue();
+    assertThat(page.locator("span.octopusSpaceByIdNote").first().isVisible()).isFalse();
+  }
+
+  /** What the space name field suggests for what it currently holds. */
+  private static List<String> suggestions(final Page page) {
+    spaceName(page).focus();
+    final Locator items = page.locator("ul.ui-autocomplete:visible li");
+    items.first().waitFor(new Locator.WaitForOptions().setTimeout(10000));
+    return items.allInnerTexts();
+  }
+}
diff --git a/octopus-server/src/main/java/octopus/teamcity/server/connection/OctopusConnectionUiData.java b/octopus-server/src/main/java/octopus/teamcity/server/connection/OctopusConnectionUiData.java
index 7d156bcd..0801199d 100644
--- a/octopus-server/src/main/java/octopus/teamcity/server/connection/OctopusConnectionUiData.java
+++ b/octopus-server/src/main/java/octopus/teamcity/server/connection/OctopusConnectionUiData.java
@@ -28,6 +28,7 @@
 import jetbrains.buildServer.serverSide.SProject;
 import jetbrains.buildServer.serverSide.oauth.OAuthConnectionDescriptor;
 import jetbrains.buildServer.users.SUser;
+import jetbrains.buildServer.web.openapi.PluginDescriptor;
 import jetbrains.buildServer.web.util.SessionUser;
 import octopus.teamcity.common.connection.ConnectionPropertyNames;
 import org.jetbrains.annotations.NotNull;
@@ -46,13 +47,17 @@ public class OctopusConnectionUiData {
 
   private static volatile OctopusConnectionsManager connectionsManager;
   private static volatile ProjectManager projectManager;
+  private static volatile PluginDescriptor pluginDescriptor;
 
   @SuppressWarnings(
       "StaticAssignmentInConstructor") // JSPs have no Spring context; capture statically.
   public OctopusConnectionUiData(
-      final OctopusConnectionsManager connectionsManager, final ProjectManager projectManager) {
+      final OctopusConnectionsManager connectionsManager,
+      final ProjectManager projectManager,
+      final PluginDescriptor pluginDescriptor) {
     OctopusConnectionUiData.connectionsManager = connectionsManager;
     OctopusConnectionUiData.projectManager = projectManager;
+    OctopusConnectionUiData.pluginDescriptor = pluginDescriptor;
   }
 
   /**
@@ -170,6 +175,37 @@ public static String buildFeaturesUrl(final HttpServletRequest request) {
         + buildType.getExternalId();
   }
 
+  /**
+   * The project whose form is being edited, for the space picker's permission check.
+   *
+   * <p>A connection page carries {@code projectId} directly; a step page instead carries {@code
+   * id=buildType:...}, so the project is derived from the build type.
+   */
+  @NotNull
+  public static String spacePickerProjectId(final HttpServletRequest request) {
+    final String projectId = request.getParameter("projectId");
+    if (projectId != null && !projectId.trim().isEmpty()) {
+      return projectId.trim();
+    }
+    final String fromBuildType = currentProjectExternalId(request);
+    return fromBuildType == null ? "" : fromBuildType;
+  }
+
+  /**
+   * Context-relative URL of the space picker's script. The plugin version is appended so a browser
+   * does not keep running a cached copy after the plugin is upgraded.
+   */
+  @NotNull
+  public static String spacePickerScriptUrl(final HttpServletRequest request) {
+    if (pluginDescriptor == null) {
+      return "";
+    }
+    final String version = pluginDescriptor.getPluginVersion();
+    return request.getContextPath()
+        + pluginDescriptor.getPluginResourcesPath("js/spacePicker.js")
+        + (version == null ? "" : "?v=" + version);
+  }
+
   private static String currentProjectExternalId(final HttpServletRequest request) {
     final SBuildType buildType = currentBuildType(request);
     return buildType == null ? null : buildType.getProject().getExternalId();
diff --git a/octopus-server/src/main/resources/buildServerResources/editOctopusConnection.jsp b/octopus-server/src/main/resources/buildServerResources/editOctopusConnection.jsp
index 27da8efe..4ad0ca06 100644
--- a/octopus-server/src/main/resources/buildServerResources/editOctopusConnection.jsp
+++ b/octopus-server/src/main/resources/buildServerResources/editOctopusConnection.jsp
@@ -93,6 +93,7 @@
 </c:if>
 <jsp:include page="spacePicker.jsp">
   <jsp:param name="note" value="Space name - optional. If not provided, individual build steps can specify."/>
+  <jsp:param name="octopusConnectionId" value="${requestScope.oauthConnectionBean.connectionId}"/>
 </jsp:include>
 
 <script type="text/javascript">
diff --git a/octopus-server/src/main/resources/buildServerResources/js/spacePicker.js b/octopus-server/src/main/resources/buildServerResources/js/spacePicker.js
new file mode 100644
index 00000000..4da6e209
--- /dev/null
+++ b/octopus-server/src/main/resources/buildServerResources/js/spacePicker.js
@@ -0,0 +1,419 @@
+/*
+ * Copyright (c) Octopus Deploy and contributors. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+ *  these files except in compliance with the License. You may obtain a copy of the
+ * License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed
+ * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+/*
+ * Behaviour for the space picker that spacePicker.jsp renders. The JSP loads this file once per
+ * page and calls OctopusSpacePicker.setupAll(), which is safe to call again for markup added later.
+ */
+window.OctopusSpacePicker = window.OctopusSpacePicker || (function () {
+
+  function escapeHtml(text) {
+    const holder = document.createElement("span");
+    holder.textContent = text;
+    return holder.innerHTML;
+  }
+
+  // TeamCity resolves a parameter reference when the build runs, so it cannot be checked here.
+  function isParameterReference(text) {
+    return text.indexOf("%") !== -1;
+  }
+
+  function describe(name, id) {
+    if (name && id) return "'" + name + "' (" + id + ")";
+    return "'" + (name || id) + "'";
+  }
+
+  function csrfToken() {
+    const tokenMeta = document.querySelector("meta[name='tc-csrf-token']");
+    return tokenMeta ? tokenMeta.getAttribute("content") || "" : "";
+  }
+
+  /** The connection's spaces, or no spaces while they are not known. */
+  function spaceList(spaces) {
+    return {
+      known: !!spaces,
+
+      withId: function (id) {
+        for (let index = 0; spaces && index < spaces.length; index++) {
+          if (spaces[index].id === id) return spaces[index];
+        }
+        return null;
+      },
+
+      named: function (name) {
+        const wanted = name.trim().toLowerCase();
+        for (let index = 0; spaces && wanted && index < spaces.length; index++) {
+          if (spaces[index].name.toLowerCase() === wanted) return spaces[index];
+        }
+        return null;
+      },
+
+      suggestionsFor: function (term) {
+        if (!spaces || isParameterReference(term)) return [];
+        const wanted = term.trim().toLowerCase();
+        const matches = [];
+        for (let index = 0; index < spaces.length; index++) {
+          const space = spaces[index];
+          if (space.name.toLowerCase().indexOf(wanted) === -1) continue;
+          matches.push({
+            // TeamCity's autocomplete inserts the label as HTML, and a space name is admin-supplied.
+            label: escapeHtml(space.name + " (" + space.id + ")"),
+            value: space.name,
+            id: space.id,
+            selectable: true
+          });
+        }
+        return matches;
+      }
+    };
+  }
+
+  /** The status line, its details tooltip, the missing-space warning and the by-id note. */
+  function pickerView(cell) {
+    const status = cell.querySelector(".octopusSpaceStatus");
+    const statusText = cell.querySelector(".octopusSpaceStatusText");
+    const details = cell.querySelector(".octopusSpaceDetails");
+    const missing = cell.querySelector(".octopusSpaceMissing");
+    const byIdNote = cell.querySelector(".octopusSpaceByIdNote");
+
+    function showDetails(reason) {
+      details.setAttribute("data-reason", reason);
+      details.setAttribute("aria-label", reason);
+      details.style.display = reason ? "" : "none";
+    }
+
+    function showDetailsTooltip() {
+      const reason = details.getAttribute("data-reason");
+      if (!reason || !(window.BS && BS.Tooltip)) return;
+      BS.Tooltip.hidePopup();
+      // The tooltip takes HTML, and the reason can quote admin-entered values.
+      BS.Tooltip.showMessage(details, { shift: { x: 10, y: 20 }, delay: 0 }, escapeHtml(reason));
+    }
+
+    function hideDetailsTooltip() {
+      if (window.BS && BS.Tooltip) BS.Tooltip.hidePopup();
+    }
+
+    details.addEventListener("mouseover", showDetailsTooltip);
+    details.addEventListener("click", showDetailsTooltip);
+    details.addEventListener("focus", showDetailsTooltip);
+    details.addEventListener("mouseout", hideDetailsTooltip);
+    details.addEventListener("blur", hideDetailsTooltip);
+
+    const view = {
+      setStatus: function (message, isError) {
+        statusText.textContent = message || "";
+        status.className = isError ? "smallNote error octopusSpaceStatus" : "smallNote octopusSpaceStatus";
+        showDetails("");
+      },
+
+      showMissing: function (message) {
+        missing.textContent = message || "";
+        missing.style.display = message ? "" : "none";
+      },
+
+      showByIdNote: function (shown) {
+        byIdNote.style.display = shown ? "" : "none";
+      },
+
+      loading: function () {
+        view.showByIdNote(false);
+        view.showMissing("");
+        view.setStatus("Loading spaces…", false);
+      },
+
+      listed: function () {
+        view.setStatus("", false);
+        view.showByIdNote(true);
+      },
+
+      cannotList: function (reason, isError) {
+        view.showByIdNote(false);
+        view.showMissing("");
+        if (isError === false) {
+          view.setStatus(reason, false);
+          return;
+        }
+        view.setStatus("Unable to retrieve spaces, please enter space name manually", true);
+        showDetails(reason);
+      }
+    };
+    return view;
+  }
+
+  // The lookup names a saved connection and nothing else - it never sends a URL or key. The
+  // server reads those from the stored connection, so it is never asked to fetch an address
+  // supplied by this page.
+  function requestSpaces(meta, connectionId, onSpaces, onFailure) {
+    $j.ajax({
+      url: meta.getAttribute("data-lookup-url"),
+      type: "POST",
+      data: {
+        projectId: meta.getAttribute("data-project-id"),
+        connectionId: connectionId
+      },
+      dataType: "json",
+      // TeamCity's own scripts add this header to jQuery requests only once the page has
+      // finished initialising, and this lookup runs before that.
+      headers: { "X-TC-CSRF-Token": csrfToken() }
+    }).done(function (data) {
+      if (data && data.error) {
+        onFailure(data.error);
+        return;
+      }
+      const listed = (data && data.spaces) || [];
+      if (!listed.length) {
+        onFailure("Octopus returned no spaces for this connection.");
+        return;
+      }
+      onSpaces(listed);
+    }).fail(function (xhr) {
+      let message = "Could not list spaces.";
+      try {
+        const parsed = JSON.parse(xhr.responseText);
+        if (parsed && parsed.error) message = parsed.error;
+      } catch (ignored) { /* fall back to the generic message */ }
+      onFailure(message);
+    });
+  }
+
+  /**
+   * One autocomplete on the name field offering both TeamCity's parameters and the connection's
+   * spaces. A step form's text fields have TeamCity's own autocomplete, which completes parameter
+   * references after a %, and a field can only have one. So this one offers TeamCity's parameters
+   * while a reference is being typed, and spaces otherwise.
+   */
+  function attachAutocomplete(nameField, callbacks) {
+    if (!$j.fn.autocomplete) return;
+    const field = $j(nameField);
+    // TeamCity's parameter completion, if this page has the parts of it used here. They are
+    // TeamCity internals, so a field without them - or where they fail - offers spaces only.
+    const parameters = window.BS && BS.AvailableParams;
+    const hasParameterCompletion = !!parameters
+      && ["buildSourceUrl", "sliceForCompletion", "sourceForElement", "moreForElement",
+          "selectForElement"].every(function (name) {
+        return typeof parameters[name] === "function";
+      });
+
+    // TeamCity sets its autocomplete up on first focus unless the field is marked as done.
+    nameField._autocompleteInited = true;
+
+    function parameterSourceUrl() {
+      return parameters.buildSourceUrl(field.data("editableObjId"));
+    }
+
+    function completingParameter() {
+      if (!hasParameterCompletion) return false;
+      try {
+        return !!parameterSourceUrl()
+          && (!!parameters.sliceForCompletion(field) || !!field.data("ctrlSpace"));
+      } catch (ignored) {
+        return false;
+      }
+    }
+
+    // Entering the field offers every space, whatever it already holds. Registered before the
+    // autocomplete, whose own focus handler runs the search.
+    let offerEverySpace = false;
+    nameField.addEventListener("focus", function () {
+      offerEverySpace = true;
+    });
+
+    field.autocomplete({
+      minLength: 0,
+      delay: 0,
+      showOnFocus: true,
+      showEmpty: false,
+      insertItemWithFocus: false,
+      completeOnCtrlSpace: true,
+      source: function (request, respond) {
+        const everySpace = offerEverySpace;
+        offerEverySpace = false;
+        if (completingParameter()) {
+          try {
+            parameters.sourceForElement(field, parameterSourceUrl(), true)(request, respond);
+            return;
+          } catch (ignored) { /* offer spaces instead */ }
+        }
+        field.data("sliced_text", null);
+        respond(callbacks.suggestionsFor(everySpace ? "" : request.term));
+      },
+      more: function (from, respond) {
+        try {
+          if (field.data("sliced_text")) {
+            parameters.moreForElement(field, parameterSourceUrl(), true)(from, respond);
+            return;
+          }
+        } catch (ignored) { /* nothing more to offer */ }
+        respond(null);
+      },
+      select: function (event, ui) {
+        if (field.data("sliced_text")) {
+          try {
+            parameters.selectForElement(field).call(this, event, ui);
+          } catch (ignored) { /* the typed text is left as it is */ }
+          callbacks.parameterChosen();
+          return false;
+        }
+        callbacks.spaceChosen(ui.item.value, ui.item.id);
+        return false;
+      }
+    });
+  }
+
+  function setup(cell) {
+    const meta = cell.querySelector(".octopusSpacePickerMeta");
+    const nameInput = cell.querySelector(".octopusSpaceNameInput");
+    if (!meta || !nameInput || !cell.querySelector(".octopusSpaceStatusText")
+        || !cell.querySelector(".octopusSpaceDetails") || cell.dataset.octopusBound === "true") {
+      return;
+    }
+    cell.dataset.octopusBound = "true";
+
+    // The props taglib renders these fields with name="prop:<property>" and id="<property>".
+    // Look the field up both ways so this does not hinge on that prefix.
+    const idFieldName = meta.getAttribute("data-space-id-field");
+    const idField =
+      cell.querySelector("input[name='prop:" + idFieldName + "']")
+      || cell.querySelector("input[name='" + idFieldName + "']")
+      || document.getElementById(idFieldName);
+    const nameField = nameInput.querySelector("input[type='text']");
+    if (!nameField) return;
+
+    // A step form has a connection selector; the connection form does not.
+    const connectionSelect = document.getElementById("octopusConnectionId");
+    const view = pickerView(cell);
+    let spaces = spaceList(null);
+    let lookupSequence = 0;
+
+    // Typing a space's exact name picks that space; anything else abandons the stored id, which
+    // would otherwise silently win over the name.
+    function storeIdForTypedName() {
+      const space = spaces.named(nameField.value);
+      if (idField) idField.value = space ? space.id : "";
+    }
+
+    function checkTypedName() {
+      const name = nameField.value.trim();
+      if (spaces.known && name && !isParameterReference(name) && !spaces.named(name)) {
+        view.showMissing("No space named '" + name + "' was found in Octopus.");
+      } else {
+        view.showMissing("");
+      }
+    }
+
+    function checkSavedSpace() {
+      const storedId = idField ? idField.value : "";
+      const storedName = nameField.value.trim();
+      if (storedId) {
+        const space = spaces.withId(storedId);
+        if (space) {
+          // Shows the space's current name, which differs from the saved one after a rename.
+          nameField.value = space.name;
+          view.showMissing("");
+        } else {
+          view.showMissing("The saved space " + describe(storedName, storedId)
+            + " was not found. Please enter the space name.");
+        }
+        return;
+      }
+      // A configuration that only stored a name gains the id when it is next saved.
+      storeIdForTypedName();
+      checkTypedName();
+    }
+
+    // On the connection form, the connection being edited is identified by the page itself once
+    // it has been saved.
+    function savedConnectionId() {
+      if (connectionSelect) return connectionSelect.value || "";
+      return meta.getAttribute("data-connection-id") || "";
+    }
+
+    function cannotList(reason, isError) {
+      spaces = spaceList(null);
+      view.cannotList(reason, isError);
+    }
+
+    function load() {
+      const sequence = ++lookupSequence;
+      const connectionId = savedConnectionId();
+      if (!connectionId) {
+        cannotList(connectionSelect
+          ? "Select a connection to choose from its spaces."
+          : "Save this connection to choose from its spaces.", false);
+        return;
+      }
+      spaces = spaceList(null);
+      view.loading();
+      requestSpaces(
+        meta,
+        connectionId,
+        function (listed) {
+          // A slower answer for an earlier connection must not replace the current one.
+          if (sequence !== lookupSequence) return;
+          spaces = spaceList(listed);
+          view.listed();
+          checkSavedSpace();
+        },
+        function (reason) {
+          if (sequence !== lookupSequence) return;
+          cannotList(reason);
+        });
+    }
+
+    attachAutocomplete(nameField, {
+      suggestionsFor: function (term) {
+        return spaces.suggestionsFor(term);
+      },
+      parameterChosen: function () {
+        storeIdForTypedName();
+        view.showMissing("");
+      },
+      spaceChosen: function (name, id) {
+        nameField.value = name;
+        if (idField) idField.value = id;
+        view.showMissing("");
+      }
+    });
+
+    nameField.addEventListener("input", function () {
+      storeIdForTypedName();
+      view.showMissing("");
+    });
+    nameField.addEventListener("change", function () {
+      storeIdForTypedName();
+      checkTypedName();
+    });
+
+    // A space id belongs to one Octopus server, so it does not carry over to another connection.
+    // The name is kept, and picks the same-named space if the new connection has one.
+    function connectionChanged() {
+      if (idField) idField.value = "";
+      load();
+    }
+
+    if (connectionSelect) connectionSelect.addEventListener("change", connectionChanged);
+    load();
+  }
+
+  return {
+    setupAll: function () {
+      const cells = document.querySelectorAll("tr.octopusSpacePickerRow td");
+      for (let index = 0; index < cells.length; index++) {
+        setup(cells[index]);
+      }
+    }
+  };
+})();
diff --git a/octopus-server/src/main/resources/buildServerResources/spacePicker.jsp b/octopus-server/src/main/resources/buildServerResources/spacePicker.jsp
index 7a7a18ad..b37eb349 100644
--- a/octopus-server/src/main/resources/buildServerResources/spacePicker.jsp
+++ b/octopus-server/src/main/resources/buildServerResources/spacePicker.jsp
@@ -1,6 +1,9 @@
 <%@ include file="/include-internal.jsp" %>
 <%@ taglib prefix="props" tagdir="/WEB-INF/tags/props" %>
+<%@ taglib prefix="l" tagdir="/WEB-INF/tags/layout" %>
+<%@ taglib prefix="bs" tagdir="/WEB-INF/tags" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ page import="octopus.teamcity.server.connection.OctopusConnectionUiData" %>
 
 <%--
   ~ Copyright (c) Octopus Deploy and contributors. All rights reserved.
@@ -17,15 +20,94 @@
   ~ specific language governing permissions and limitations under the License.
   --%>
 
-<%-- Space field shared by the connection form and every step form; both store the space under the
-     same property name. The including page passes its help text as the "note" param. --%>
+<%--
+  Space picker, shared by the connection form and every step form.
+
+  A text field that suggests the connection's spaces as you type. Choosing a space, or typing its
+  exact name, stores the space's *id* alongside the name; the id survives the space being renamed
+  in Octopus. Anything else typed - including a parameter reference such as %octopus.space%, which
+  TeamCity resolves when the build runs - is stored as the name alone.
+
+  The property names are the same on a connection and on a step, so OctopusConstants supplies both
+  regardless of which page is including this. The including page passes its own help text as the
+  "note" param. The connection form also passes the id of the connection being edited as the
+  "octopusConnectionId" param, empty until the connection is saved; a step form's connection
+  selector supplies it there instead.
+--%>
+
 <jsp:useBean id="spaceKeys" class="octopus.teamcity.common.OctopusConstants"/>
+<%
+  pageContext.setAttribute(
+      "spacePickerProjectId", OctopusConnectionUiData.spacePickerProjectId(request));
+  pageContext.setAttribute(
+      "spacePickerScriptUrl", OctopusConnectionUiData.spacePickerScriptUrl(request));
+%>
 
-<tr>
-  <th>Space name:</th>
+<tr class="octopusSpacePickerRow">
+  <th>Space:</th>
   <td>
-    <props:textProperty name="${spaceKeys.spaceName}" className="longField"/>
+    <props:hiddenProperty name="${spaceKeys.spaceId}"/>
+    <span class="octopusSpaceNameInput">
+      <props:textProperty name="${spaceKeys.spaceName}" className="longField"/>
+    </span>
     <span class="error" id="error_${spaceKeys.spaceName}"></span>
+    <span class="error octopusSpaceMissing" style="display:none;"></span>
+    <span class="smallNote octopusSpaceStatus"><span class="octopusSpaceStatusText"></span>
+      <%-- Why the spaces could not be listed, shown in a tooltip; the reason is in data-reason. --%>
+      <span class="octopusSpaceDetails" tabindex="0" role="button" style="display:none;"><bs:helpIcon/></span>
+    </span>
+
+    <%-- Config passed as HTML-escaped data attributes rather than interpolated into JS string
+         literals, so nothing server-side can break out into script. --%>
+    <span class="octopusSpacePickerMeta" style="display:none;"
+          data-project-id="<c:out value='${spacePickerProjectId}'/>"
+          data-lookup-url="<c:out value='${pageContext.request.contextPath}'/>/octopus/listSpaces.html"
+          data-space-id-field="<c:out value='${spaceKeys.spaceId}'/>"
+          data-connection-id="<c:out value='${param.octopusConnectionId}'/>"
+          data-script-url="<c:out value='${spacePickerScriptUrl}'/>"></span>
+
     <span class="smallNote"><c:out value="${param.note}"/></span>
+    <span class="smallNote octopusSpaceByIdNote" style="display:none;">
+      Choose a space from the suggestions to store it by id, so renaming it in Octopus will not
+      break this configuration.
+    </span>
   </td>
 </tr>
+
+<%-- The behaviour lives in js/spacePicker.js. It is added to the page from here rather than with
+     a script src tag, because the connection form arrives through an AJAX dialog that runs inline
+     scripts but does not load external ones. --%>
+<script type="text/javascript">
+  (function () {
+    function setUp() {
+      window.OctopusSpacePicker.setupAll();
+    }
+    function showLoadFailure() {
+      const statuses = document.querySelectorAll(".octopusSpaceStatus");
+      for (let index = 0; index < statuses.length; index++) {
+        statuses[index].className = "smallNote error octopusSpaceStatus";
+        statuses[index].querySelector(".octopusSpaceStatusText").textContent =
+          "Unable to retrieve spaces, please enter space name manually";
+      }
+    }
+    if (window.OctopusSpacePicker) {
+      setUp();
+      return;
+    }
+    const meta = document.querySelector(".octopusSpacePickerMeta");
+    if (!meta) return;
+    let script = document.getElementById("octopusSpacePickerScript");
+    if (!script) {
+      script = document.createElement("script");
+      script.id = "octopusSpacePickerScript";
+      script.src = meta.getAttribute("data-script-url");
+      // Removed on failure so the next form to include this tries loading it again.
+      script.addEventListener("error", function () {
+        script.remove();
+      });
+      document.head.appendChild(script);
+    }
+    script.addEventListener("load", setUp);
+    script.addEventListener("error", showLoadFailure);
+  })();
+</script>
diff --git a/octopus-server/src/test/java/octopus/teamcity/server/connection/OctopusConnectionUiDataTest.java b/octopus-server/src/test/java/octopus/teamcity/server/connection/OctopusConnectionUiDataTest.java
index 01797905..42e5d63c 100644
--- a/octopus-server/src/test/java/octopus/teamcity/server/connection/OctopusConnectionUiDataTest.java
+++ b/octopus-server/src/test/java/octopus/teamcity/server/connection/OctopusConnectionUiDataTest.java
@@ -1,6 +1,7 @@
 package octopus.teamcity.server.connection;
 
 import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.anyString;
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.when;
 
@@ -17,6 +18,7 @@
 import jetbrains.buildServer.serverSide.SProject;
 import jetbrains.buildServer.serverSide.oauth.OAuthConnectionDescriptor;
 import jetbrains.buildServer.users.SUser;
+import jetbrains.buildServer.web.openapi.PluginDescriptor;
 import octopus.teamcity.common.connection.ConnectionPropertyNames;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
@@ -29,12 +31,13 @@ class OctopusConnectionUiDataTest {
 
   @Mock private OctopusConnectionsManager connectionsManager;
   @Mock private ProjectManager projectManager;
+  @Mock private PluginDescriptor pluginDescriptor;
   @Mock private SUser user;
 
   @BeforeEach
   void setUp() {
     // Constructing the bean captures the collaborators into the class's static fields.
-    new OctopusConnectionUiData(connectionsManager, projectManager);
+    new OctopusConnectionUiData(connectionsManager, projectManager, pluginDescriptor);
   }
 
   private OAuthConnectionDescriptor connection(
@@ -247,4 +250,46 @@ void buildFeaturesUrlEmptyWhenUnresolved() {
 
     assertThat(OctopusConnectionUiData.buildFeaturesUrl(request)).isEqualTo("");
   }
+
+  private static HttpServletRequest requestWith(final Map<String, String> parameters) {
+    final HttpServletRequest request = mock(HttpServletRequest.class);
+    when(request.getParameter(anyString()))
+        .thenAnswer(invocation -> parameters.get(invocation.<String>getArgument(0)));
+    return request;
+  }
+
+  @Test
+  void spacePickerScriptUrlIsContextRelativeAndVersioned() {
+    final HttpServletRequest request = mock(HttpServletRequest.class);
+    when(request.getContextPath()).thenReturn("/tc");
+    when(pluginDescriptor.getPluginResourcesPath("js/spacePicker.js"))
+        .thenReturn("/plugins/Octopus.TeamCity/js/spacePicker.js");
+    when(pluginDescriptor.getPluginVersion()).thenReturn("6.2.0");
+
+    assertThat(OctopusConnectionUiData.spacePickerScriptUrl(request))
+        .isEqualTo("/tc/plugins/Octopus.TeamCity/js/spacePicker.js?v=6.2.0");
+  }
+
+  @Test
+  void spacePickerProjectIdIsTheConnectionFormsProject() {
+    final Map<String, String> parameters = new HashMap<>();
+    parameters.put("projectId", " Rtest ");
+
+    assertThat(OctopusConnectionUiData.spacePickerProjectId(requestWith(parameters)))
+        .isEqualTo("Rtest");
+  }
+
+  @Test
+  void spacePickerProjectIdIsTheStepFormsBuildConfigurationsProject() {
+    final SBuildType buildType = mock(SBuildType.class);
+    final SProject project = mock(SProject.class);
+    when(projectManager.findBuildTypeByExternalId("Rtest_Build")).thenReturn(buildType);
+    when(buildType.getProject()).thenReturn(project);
+    when(project.getExternalId()).thenReturn("Rtest");
+    final Map<String, String> parameters = new HashMap<>();
+    parameters.put("id", "buildType:Rtest_Build");
+
+    assertThat(OctopusConnectionUiData.spacePickerProjectId(requestWith(parameters)))
+        .isEqualTo("Rtest");
+  }
 }