refactor: move name row above runtime controls, normalize heights

Author: ammar-agent

src/browser/components/ChatInput/CreationControls.tsx

@@ -54,7 +54,47 @@ export function CreationControls(props: CreationControlsProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      {/* First row: Runtime, Branch, SSH */}
+      {/* First row: Workspace name with auto-generate checkbox */}
+      <div className="flex items-center gap-2" data-component="WorkspaceNameGroup">
+        <label htmlFor="workspace-name" className="text-muted text-xs whitespace-nowrap">
+          Name:
+        </label>
+        <div className="relative max-w-xs flex-1">
+          <input
+            id="workspace-name"
+            type="text"
+            value={props.workspaceName}
+            onChange={handleNameChange}
+            placeholder={props.isGeneratingName ? "Generating..." : "workspace-name"}
+            disabled={props.disabled || props.autoGenerateName}
+            className={cn(
+              "bg-separator text-foreground border-border-medium focus:border-accent h-6 w-full rounded border px-2 pr-6 text-xs focus:outline-none disabled:opacity-50",
+              props.nameError && "border-red-500"
+            )}
+          />
+          {/* Loading indicator when generating */}
+          {props.isGeneratingName && (
+            <div className="absolute top-1/2 right-1 -translate-y-1/2">
+              <Loader2 className="text-muted h-3 w-3 animate-spin" />
+            </div>
+          )}
+        </div>
+        {/* Auto-generate checkbox */}
+        <label className="text-muted flex h-6 items-center gap-1 text-[10px] whitespace-nowrap">
+          <input
+            type="checkbox"
+            checked={props.autoGenerateName}
+            onChange={(e) => props.onAutoGenerateChange(e.target.checked)}
+            disabled={props.disabled}
+            className="h-3 w-3"
+          />
+          auto
+        </label>
+        {/* Error display - inline */}
+        {props.nameError && <span className="text-xs text-red-500">{props.nameError}</span>}
+      </div>
+
+      {/* Second row: Runtime, Branch, SSH */}
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
         {/* Runtime Selector - icon-based with tooltips */}
         <RuntimeIconSelector
@@ -68,7 +108,7 @@ export function CreationControls(props: CreationControlsProps) {
         {/* Trunk Branch Selector - hidden for Local runtime */}
         {showTrunkBranchSelector && (
           <div
-            className="flex items-center gap-1"
+            className="flex h-6 items-center gap-1"
             data-component="TrunkBranchGroup"
             data-tutorial="trunk-branch"
           >
@@ -81,7 +121,7 @@ export function CreationControls(props: CreationControlsProps) {
               options={props.branches}
               onChange={props.onTrunkBranchChange}
               disabled={props.disabled}
-              className="max-w-[120px]"
+              className="h-6 max-w-[120px]"
             />
           </div>
         )}
@@ -94,51 +134,10 @@ export function CreationControls(props: CreationControlsProps) {
             onChange={(e) => props.onSshHostChange(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"
+            className="bg-separator text-foreground border-border-medium focus:border-accent h-6 w-32 rounded border px-1 text-xs focus:outline-none disabled:opacity-50"
           />
         )}
       </div>
-
-      {/* Second row: Workspace name with auto-generate checkbox */}
-      <div className="flex items-center gap-2" data-component="WorkspaceNameGroup">
-        <label htmlFor="workspace-name" className="text-muted text-xs whitespace-nowrap">
-          Name:
-        </label>
-        <div className="relative max-w-xs flex-1">
-          <input
-            id="workspace-name"
-            type="text"
-            value={props.workspaceName}
-            onChange={handleNameChange}
-            placeholder={props.isGeneratingName ? "Generating..." : "workspace-name"}
-            disabled={props.disabled || props.autoGenerateName}
-            className={cn(
-              "bg-separator text-foreground border-border-medium focus:border-accent w-full rounded border px-2 py-0.5 pr-6 text-xs focus:outline-none disabled:opacity-50",
-              props.nameError && "border-red-500"
-            )}
-          />
-          {/* Loading indicator when generating */}
-          {props.isGeneratingName && (
-            <div className="absolute top-1/2 right-1 -translate-y-1/2">
-              <Loader2 className="text-muted h-3 w-3 animate-spin" />
-            </div>
-          )}
-        </div>
-        {/* Auto-generate checkbox */}
-        <label className="text-muted flex items-center gap-1 text-[10px] whitespace-nowrap">
-          <input
-            type="checkbox"
-            checked={props.autoGenerateName}
-            onChange={(e) => props.onAutoGenerateChange(e.target.checked)}
-            disabled={props.disabled}
-            className="h-3 w-3"
-          />
-          auto
-        </label>
-      </div>
-
-      {/* Error display */}
-      {props.nameError && <div className="text-xs text-red-500">{props.nameError}</div>}
     </div>
   );
 }

src/browser/components/ChatInput/index.tsx

@@ -1391,7 +1391,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               </div>
             </div>
 
-            {/* Creation controls - second row for creation variant */}
+            {/* Creation controls - below model controls for creation variant */}
             {variant === "creation" && (
               <CreationControls
                 branches={creationState.branches}