Group models

src/games/storywriter/components/settings-modal.tsx

@@ -41,7 +41,30 @@ export const SettingsModal = ({ onClose }: Props) => {
     const modelsData = useQuery(fetchModels, connectionToFetch);
 
     const isLoadingModels = connectionToFetch != null && modelsData == undefined;
-    const models = modelsData ?? [];
+    const groupedModels = useMemo(() => {
+        const sorted = (modelsData ?? []).sort((a, b) => {
+            // Sort by tool support first (true before false)
+            if (a.support_tools !== b.support_tools) {
+                return a.support_tools ? -1 : 1;
+            }
+            // Then by max context (bigger first, undefined treated as 0)
+            const aContext = a.max_context ?? 0;
+            const bContext = b.max_context ?? 0;
+            if (aContext !== bContext) {
+                return bContext - aContext;
+            }
+            // Then by name (alphabetically)
+            return a.id.localeCompare(b.id);
+        });
+
+        // Group by context size
+        const groups = Map.groupBy(sorted, m => m.max_context ?? 0);
+
+        // Convert to array sorted by context size (bigger first)
+        return Array.from(groups.entries())
+            .sort((a, b) => b[0] - a[0])
+            .map(([context, models]) => ({ context, models }));
+    }, [modelsData]);
 
     const handleBlur = () => {
         if (url && apiKey) {
@@ -119,15 +142,21 @@ export const SettingsModal = ({ onClose }: Props) => {
                             {connectionToTest ? (
                                 isLoadingModels ? (
                                     <p>Loading models...</p>
-                                ) : models.length > 0 ? (
+                                ) : groupedModels.length > 0 ? (
                                     <select
                                         value={selectedModel}
                                         onChange={setSelectedModel}
                                         class={styles.select}
                                     >
                                         <option value="">Select a model</option>
+                                        {groupedModels.map(({ context, models }) => (
+                                            <optgroup key={context} label={`${context} context`}>
                                                 {models.map(m => (
-                                            <option key={m.id} value={m.id}>{m.id}</option>
+                                                    <option key={m.id} value={m.id}>
+                                                        {m.support_tools ? '🔧 ' : ''}{m.id} {m.max_length ? `(len: ${m.max_length})` : ''}
+                                                    </option>
+                                                ))}
+                                            </optgroup>
                                         ))}
                                     </select>
                                 ) : (