fix: sort autocomplete list alphabetically with prefix matches first

- Add sortKey prop to useFilteredList for alphabetical sorting
- Prefix matches are prioritized and sorted alphabetically
- Non-prefix matches follow, also sorted alphabetically
- Apply sortKey to slash command autocomplete in prompt-input

Author: ariane-emory

packages/app/src/components/prompt-input.tsx

@@ -460,6 +460,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     key: (x) => x?.id,
     filterKeys: ["trigger", "title", "description"],
     onSelect: handleSlashSelect,
+    sortKey: "trigger",
   })
 
   const createPill = (part: FileAttachmentPart | AgentPart) => {

packages/ui/src/hooks/use-filtered-list.tsx

@@ -13,6 +13,7 @@ export interface FilteredListProps<T> {
   sortBy?: (a: T, b: T) => number
   sortGroupsBy?: (a: { category: string; items: T[] }, b: { category: string; items: T[] }) => number
   onSelect?: (value: T | undefined, index: number) => void
+  sortKey?: keyof T
 }
 
 export function useFilteredList<T>(props: FilteredListProps<T>) {
@@ -33,10 +34,27 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
         all,
         (x) => {
           if (!needle) return x
+          let filtered: T[]
           if (!props.filterKeys && Array.isArray(x) && x.every((e) => typeof e === "string")) {
-            return fuzzysort.go(needle, x).map((x) => x.target) as T[]
+            filtered = fuzzysort.go(needle, x).map((x) => x.target) as T[]
+          } else {
+            filtered = fuzzysort.go(needle, x, { keys: props.filterKeys! }).map((x) => x.obj)
           }
-          return fuzzysort.go(needle, x, { keys: props.filterKeys! }).map((x) => x.obj)
+          // Sort with prefix matches first, then alphabetically within each group
+          if (props.sortKey) {
+            const key = props.sortKey
+            const lowerNeedle = needle.toLowerCase()
+            filtered.sort((a, b) => {
+              const aVal = String(a[key]).toLowerCase()
+              const bVal = String(b[key]).toLowerCase()
+              const aPrefix = aVal.startsWith(lowerNeedle)
+              const bPrefix = bVal.startsWith(lowerNeedle)
+              if (aPrefix && !bPrefix) return -1
+              if (!aPrefix && bPrefix) return 1
+              return aVal.localeCompare(bVal)
+            })
+          }
+          return filtered
         },
         groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
         entries(),