From 85a0f5a80119beb6c1abe8bee0134664086315bb Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 2 Dec 2025 12:13:06 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20show=20runtime=20selector?=
 =?UTF-8?q?=20first=20in=20workspace=20creation=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatInput/CreationControls.tsx | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/browser/components/ChatInput/CreationControls.tsx b/src/browser/components/ChatInput/CreationControls.tsx
index 34dcb0a50a..bd0d0efd6a 100644
--- a/src/browser/components/ChatInput/CreationControls.tsx
+++ b/src/browser/components/ChatInput/CreationControls.tsx
@@ -25,28 +25,7 @@ export function CreationControls(props: CreationControlsProps) {
 
   return (
     <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      {/* Trunk Branch Selector - hidden for Local runtime */}
-      {showTrunkBranchSelector && (
-        <div
-          className="flex items-center gap-1"
-          data-component="TrunkBranchGroup"
-          data-tutorial="trunk-branch"
-        >
-          <label htmlFor="trunk-branch" className="text-muted text-xs">
-            From:
-          </label>
-          <Select
-            id="trunk-branch"
-            value={props.trunkBranch}
-            options={props.branches}
-            onChange={props.onTrunkBranchChange}
-            disabled={props.disabled}
-            className="max-w-[120px]"
-          />
-        </div>
-      )}
-
-      {/* Runtime Selector */}
+      {/* Runtime Selector - first */}
       <div
         className="flex items-center gap-1"
         data-component="RuntimeSelectorGroup"
@@ -68,16 +47,6 @@ export function CreationControls(props: CreationControlsProps) {
           disabled={props.disabled}
           aria-label="Runtime mode"
         />
-        {props.runtimeMode === RUNTIME_MODE.SSH && (
-          <input
-            type="text"
-            value={props.sshHost}
-            onChange={(e) => props.onRuntimeChange(RUNTIME_MODE.SSH, e.target.value)}
-            placeholder="user@host"
-            disabled={props.disabled}
-            className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50"
-          />
-        )}
         <TooltipWrapper inline>
           <span className="text-muted cursor-help text-xs">?</span>
           <Tooltip className="tooltip" align="center" width="wide">
@@ -90,6 +59,39 @@ export function CreationControls(props: CreationControlsProps) {
           </Tooltip>
         </TooltipWrapper>
       </div>
+
+      {/* Trunk Branch Selector - hidden for Local runtime */}
+      {showTrunkBranchSelector && (
+        <div
+          className="flex items-center gap-1"
+          data-component="TrunkBranchGroup"
+          data-tutorial="trunk-branch"
+        >
+          <label htmlFor="trunk-branch" className="text-muted text-xs">
+            From:
+          </label>
+          <Select
+            id="trunk-branch"
+            value={props.trunkBranch}
+            options={props.branches}
+            onChange={props.onTrunkBranchChange}
+            disabled={props.disabled}
+            className="max-w-[120px]"
+          />
+        </div>
+      )}
+
+      {/* SSH Host Input - after From selector */}
+      {props.runtimeMode === RUNTIME_MODE.SSH && (
+        <input
+          type="text"
+          value={props.sshHost}
+          onChange={(e) => props.onRuntimeChange(RUNTIME_MODE.SSH, e.target.value)}
+          placeholder="user@host"
+          disabled={props.disabled}
+          className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50"
+        />
+      )}
     </div>
   );
 }