Added Usage page.

src/shared/components/ModelSelectModal.js

@@ -1,9 +1,15 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import Modal from "./Modal";
 import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
-import { AI_PROVIDERS } from "@/shared/constants/providers";
+import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/providers";
+
+// Provider order: OAuth first, then API Key (matches dashboard/providers)
+const PROVIDER_ORDER = [
+  ...Object.keys(OAUTH_PROVIDERS),
+  ...Object.keys(APIKEY_PROVIDERS),
+];
 
 export default function ModelSelectModal({
   isOpen,
@@ -15,19 +21,39 @@ export default function ModelSelectModal({
   modelAliases = {},
 }) {
   const [searchQuery, setSearchQuery] = useState("");
+  const [combos, setCombos] = useState([]);
 
-  // Group models by provider
+  // Fetch combos when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      fetch("/api/combos")
+        .then(res => res.json())
+        .then(data => setCombos(data.combos || []))
+        .catch(() => setCombos([]));
+    }
+  }, [isOpen]);
+
+  const allProviders = { ...OAUTH_PROVIDERS, ...APIKEY_PROVIDERS };
+
+  // Group models by provider with priority order
   const groupedModels = useMemo(() => {
     const groups = {};
     
     // Get active provider IDs
     const activeProviderIds = activeProviders.length > 0 
       ? activeProviders.map(p => p.provider)
-      : Object.keys(AI_PROVIDERS);
+      : PROVIDER_ORDER;
 
-    activeProviderIds.forEach((providerId) => {
+    // Sort by PROVIDER_ORDER
+    const sortedProviderIds = [...activeProviderIds].sort((a, b) => {
+      const indexA = PROVIDER_ORDER.indexOf(a);
+      const indexB = PROVIDER_ORDER.indexOf(b);
+      return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
+    });
+
+    sortedProviderIds.forEach((providerId) => {
       const alias = PROVIDER_ID_TO_ALIAS[providerId] || providerId;
-      const providerInfo = AI_PROVIDERS[providerId] || { name: providerId, color: "#666" };
+      const providerInfo = allProviders[providerId] || { name: providerId, color: "#666" };
       
       // For passthrough providers, get models from aliases
       if (providerInfo.passthroughModels) {
@@ -65,7 +91,14 @@ export default function ModelSelectModal({
     });
 
     return groups;
-  }, [activeProviders, modelAliases]);
+  }, [activeProviders, modelAliases, allProviders]);
+
+  // Filter combos by search query
+  const filteredCombos = useMemo(() => {
+    if (!searchQuery.trim()) return combos;
+    const query = searchQuery.toLowerCase();
+    return combos.filter(c => c.name.toLowerCase().includes(query));
+  }, [combos, searchQuery]);
 
   // Filter models by search query
   const filteredGroups = useMemo(() => {
@@ -128,6 +161,38 @@ export default function ModelSelectModal({
 
       {/* Models grouped by provider - compact */}
       <div className="max-h-[300px] overflow-y-auto space-y-3">
+        {/* Combos section - always first */}
+        {filteredCombos.length > 0 && (
+          <div>
+            <div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
+              <span className="material-symbols-outlined text-primary text-[14px]">layers</span>
+              <span className="text-xs font-medium text-primary">Combos</span>
+              <span className="text-[10px] text-text-muted">({filteredCombos.length})</span>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {filteredCombos.map((combo) => {
+                const isSelected = selectedModel === combo.name;
+                return (
+                  <button
+                    key={combo.id}
+                    onClick={() => handleSelect({ id: combo.name, name: combo.name, value: combo.name })}
+                    className={`
+                      px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
+                      ${isSelected 
+                        ? "bg-primary text-white border-primary" 
+                        : "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
+                      }
+                    `}
+                  >
+                    {combo.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Provider models */}
         {Object.entries(filteredGroups).map(([providerId, group]) => (
           <div key={providerId}>
             {/* Provider header */}
@@ -168,7 +233,7 @@ export default function ModelSelectModal({
           </div>
         ))}
 
-        {Object.keys(filteredGroups).length === 0 && (
+        {Object.keys(filteredGroups).length === 0 && filteredCombos.length === 0 && (
           <div className="text-center py-4 text-text-muted">
             <span className="material-symbols-outlined text-2xl mb-1 block">
               search_off