Fix getProviders return type handling in frontend

Author: chriswritescode-dev

frontend/src/components/model/ModelQuickSelect.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { useModelSelection } from '@/hooks/useModelSelection'
 import { useVariants } from '@/hooks/useVariants'
-import { formatModelName } from '@/api/providers'
+import { formatModelName, getProviders } from '@/api/providers'
 import { useQuery } from '@tanstack/react-query'
 import { useOpenCodeClient } from '@/hooks/useOpenCode'
 
@@ -33,25 +33,25 @@ export function ModelQuickSelect({
   const { availableVariants, currentVariant, setVariant, clearVariant, hasVariants } = useVariants(opcodeUrl, directory)
   const client = useOpenCodeClient(opcodeUrl, directory)
 
-  const { data: providersData } = useQuery({
-    queryKey: ['opencode', 'providers', opcodeUrl, directory],
-    queryFn: () => client!.getProviders(),
-    enabled: !!client,
-    staleTime: 30000,
-  })
+   const { data: providersData } = useQuery({
+     queryKey: ['opencode', 'providers', opcodeUrl, directory],
+     queryFn: () => getProviders(),
+     enabled: !!client,
+     staleTime: 30000,
+   })
 
-  const recentModelsWithNames = useMemo(() => {
-    if (!providersData?.all || recentModels.length === 0) return []
-    
-    return recentModels
-      .filter(recent => {
-        const key = `${recent.providerID}/${recent.modelID}`
-        return key !== modelString
-      })
-      .slice(0, 5)
-      .map(recent => {
-        let displayName = recent.modelID
-        for (const provider of providersData.all) {
+   const recentModelsWithNames = useMemo(() => {
+     if (!providersData?.providers || providersData.providers.length === 0 || recentModels.length === 0) return []
+     
+     return recentModels
+       .filter(recent => {
+         const key = `${recent.providerID}/${recent.modelID}`
+         return key !== modelString
+       })
+       .slice(0, 5)
+       .map(recent => {
+         let displayName = recent.modelID
+         for (const provider of providersData.providers) {
           if (provider.id === recent.providerID && provider.models) {
             const modelData = provider.models[recent.modelID]
             if (modelData) {

frontend/src/hooks/useVariants.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useModelSelection } from './useModelSelection'
 import { useModelStore } from '@/stores/modelStore'
 import { useOpenCodeClient } from './useOpenCode'
+import { getProviders } from '@/api/providers'
 import { useQuery } from '@tanstack/react-query'
 
 export interface UseVariantsResult {
@@ -21,16 +22,16 @@ export function useVariants(
   const { setVariant: setStoreVariant, clearVariant: clearStoreVariant } = useModelStore()
   const client = useOpenCodeClient(opcodeUrl, directory)
 
-  const { data: providersData, isLoading } = useQuery({
-    queryKey: ['opencode', 'providers', opcodeUrl, directory],
-    queryFn: () => client!.getProviders(),
-    enabled: !!client && !!model,
-    staleTime: 30000,
-  })
+   const { data: providersData, isLoading } = useQuery({
+     queryKey: ['opencode', 'providers', opcodeUrl, directory],
+     queryFn: () => getProviders(),
+     enabled: !!client && !!model,
+     staleTime: 30000,
+   })
 
-  const currentModel = useMemo(() => {
-    if (!model || isLoading || !providersData?.all) return null
-    for (const provider of providersData.all) {
+   const currentModel = useMemo(() => {
+     if (!model || isLoading || !providersData?.providers || providersData.providers.length === 0) return null
+     for (const provider of providersData.providers) {
       if (provider.id === model.providerID && provider.models) {
         const modelData = provider.models[model.modelID]
         if (modelData) {