Ensure 'Other' group always appears last with groupOrder

Implement alternative approach where items without groups ('Other') always appear at the very end, regardless of groupOrder specification. This provides better UX as users expect the fallback 'Other' category to be last.

Changes:
- Update SelectInput sorting logic to use MAX_SAFE_INTEGER + 1 for ungrouped items
- Add comprehensive test demonstrating the new behavior
- Update existing test snapshots to reflect the improved ordering

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: jenstanicak

.changeset/reorder-extension-templates-grouping.md

@@ -267,6 +267,42 @@ describe('SelectInput', async () => {
     expect(onChange).not.toHaveBeenCalled()
   })
 
+  test.skipIf(runningOnWindows)('ensures "Other" group always appears last with groupOrder', async () => {
+    const onChange = vi.fn()
+
+    const items = [
+      {label: 'item1', value: '1', group: 'GroupA'},
+      {label: 'item2', value: '2', group: 'GroupC'},
+      {label: 'item3', value: '3'}, // no group - should be "Other"
+      {label: 'item4', value: '4', group: 'GroupX'}, // not in groupOrder
+      {label: 'item5', value: '5'}, // no group - should be "Other"
+    ]
+
+    // GroupOrder specifies: GroupC first, then GroupA
+    // GroupX is not specified, so should come before "Other" but after specified groups
+    const groupOrder = ['GroupC', 'GroupA']
+
+    const renderInstance = render(<SelectInput items={items} onChange={onChange} groupOrder={groupOrder} />)
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   GroupC
+         >  item2
+
+         GroupA
+            item1
+
+         GroupX
+            item4
+
+         Other
+            item3
+            item5
+
+         Press ↑↓ arrows to select, enter to confirm."
+    `)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
   test('allows disabling shortcuts', async () => {
     const onChange = vi.fn()
     const items = [
@@ -383,16 +419,16 @@ describe('SelectInput', async () => {
     const renderInstance = render(<SelectInput items={items} onChange={() => {}} availableLines={10} />)
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Other                                                                        
-         >  first                                                                     
-            second                                                                    
-            third                                                                     
-            fourth                                                                    
-                                                                                      
-         Automations                                                                  
-            fifth                                                                     
-            sixth                                                                     
+      "   Automations                                                                  
+         >  fifth                                                                     
+            sixth                                                                     
+                                                                                      
+         Merchant Admin                                                               
+            eighth                                                                    
+            ninth                                                                     
                                                                                       
+         Other                                                                        
+            first                                                                     
 
          Press ↑↓ arrows to select, enter to confirm."
     `)
@@ -405,16 +441,16 @@ describe('SelectInput', async () => {
     await sendInputAndWaitForChange(renderInstance, ARROW_DOWN)
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Other                                                                        
-            second                                                                    
-            third                                                                     
-            fourth                                                                    
+      "   Automations                                                                  
+            sixth                                                                     
                                                                                       
-         [1mAutomations[22m                                                                 [46m [49m
-            fifth                                                                    [100m [49m
-         [36m>[39m  [36msixth[39m                                                                    [100m [49m
+         [1mMerchant Admin[22m                                                              [46m [49m
+            eighth                                                                   [46m [49m
+            ninth                                                                    [46m [49m
                                                                                       
          Other                                                                        
+            first                                                                     
+         >  second                                                                    
 
          Press ↑↓ arrows to select, enter to confirm."
     `)

packages/cli-kit/src/private/node/ui/components/SelectInput.test.tsx

@@ -164,7 +164,13 @@ function SelectInputInner<T>(
 
   const hasAnyGroup = rawItems.some((item) => typeof item.group !== 'undefined')
   const items = sortBy(rawItems, (item) => {
-    if (!groupOrder || !item.group) return Number.MAX_SAFE_INTEGER
+    // Items without groups ("Other") always go last
+    if (!item.group) return Number.MAX_SAFE_INTEGER + 1
+    
+    // If no groupOrder specified, use default behavior
+    if (!groupOrder) return Number.MAX_SAFE_INTEGER
+    
+    // Items with groups get their position from groupOrder, or MAX_SAFE_INTEGER if not specified
     const index = groupOrder.indexOf(item.group)
     return index === -1 ? Number.MAX_SAFE_INTEGER : index
   })