fix: handle checking model gated

web-app/src/containers/ModelInfoHoverCard.tsx

@@ -1,9 +1,9 @@
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
 import { IconInfoCircle } from '@tabler/icons-react'
 import { CatalogModel, ModelQuant } from '@/services/models'
 
 interface ModelInfoHoverCardProps {
@@ -16,59 +16,59 @@
   children?: React.ReactNode
 }
 
 export const ModelInfoHoverCard = ({
   model,
   variant,
   isDefaultVariant,
   defaultModelQuantizations,
   modelSupportStatus,
   onCheckModelSupport,
   children,
 }: ModelInfoHoverCardProps) => {
   const displayVariant =
     variant ||
     model.quants.find((m) =>
       defaultModelQuantizations.some((e) =>
         m.model_id.toLowerCase().includes(e)
       )
     ) ||
     model.quants?.[0]
 
   const handleMouseEnter = () => {
     if (displayVariant) {
       onCheckModelSupport(displayVariant)
     }
   }
 
   const getCompatibilityStatus = () => {
     const status = displayVariant
       ? modelSupportStatus[displayVariant.model_id]
       : null
 
     if (status === 'LOADING') {
       return (
         <div className="flex items-start gap-2">
           <div className="size-2 shrink-0 border border-main-view-fg/50 border-t-transparent rounded-full animate-spin mt-1"></div>
           <span className="text-main-view-fg/50">Checking...</span>
         </div>
       )
     } else if (status === 'GREEN') {
       return (
         <div className="flex items-start gap-2">
           <div className="size-2 shrink-0 bg-green-500 rounded-full mt-1"></div>
           <span className="text-green-500 font-medium">
             Recommended for your device
           </span>
         </div>
       )
     } else if (status === 'YELLOW') {
       return (
         <div className="flex items-start gap-2">
           <div className="size-2 shrink-0 bg-yellow-500 rounded-full mt-1"></div>
           <span className="text-yellow-500 font-medium">
             May be slow on your device
           </span>
         </div>
       )
     } else if (status === 'RED') {
       return (
@@ -79,6 +79,15 @@
           </span>
         </div>
       )
+    } else if (status === 'GREY') {
+      return (
+        <div className="flex items-start gap-2">
+          <div className="size-2 shrink-0 bg-neutral-500 rounded-full mt-1"></div>
+          <span className="text-neutral-500 font-medium">
+            Unable to determine model compatibility with your current device
+          </span>
+        </div>
+      )
     } else {
       return (
         <div className="flex items-start gap-2">
@@ -121,9 +130,7 @@
               <>
                 <div>
                   <span className="text-main-view-fg/50 block">
-                    {isDefaultVariant
-                      ? 'Maybe Default Quantization'
-                      : 'Quantization'}
+                    {isDefaultVariant ? 'Default Quantization' : 'Quantization'}
                   </span>
                   <span className="text-main-view-fg font-medium mt-1 inline-block">
                     {variant?.model_id.split('-').pop()?.toUpperCase() || 'N/A'}

web-app/src/containers/ModelSupportStatus.tsx

@@ -24,15 +24,15 @@ export const ModelSupportStatus = ({
   className,
 }: ModelSupportStatusProps) => {
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null
+    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null | 'GREY'
   >(null)
 
   // Helper function to check model support with proper path resolution
   const checkModelSupportWithPath = useCallback(
     async (
       id: string,
       ctxSize: number
-    ): Promise<'RED' | 'YELLOW' | 'GREEN' | null> => {
+    ): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY' | null> => {
       try {
         const janDataFolder = await getJanDataFolderPath()
 

web-app/src/routes/hub/$modelId.tsx

@@ -64,7 +64,7 @@ function HubModelDetail() {
 
   // State for model support status
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING'>
+    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | 'GREY'>
   >({})
 
   useEffect(() => {

web-app/src/services/__tests__/models.test.ts

@@ -924,7 +924,7 @@ describe('models service', () => {
       expect(result).toBe('YELLOW') // Should use fallback
     })
 
-    it('should return RED when there is an error', async () => {
+    it('should return GREY when there is an error', async () => {
       const mockEngineWithError = {
         ...mockEngine,
         isModelSupported: vi.fn().mockRejectedValue(new Error('Test error')),
@@ -934,7 +934,7 @@ describe('models service', () => {
 
       const result = await isModelSupported('/path/to/model.gguf')
 
-      expect(result).toBe('RED')
+      expect(result).toBe('GREY')
     })
   })
 })

web-app/src/services/models.ts

@@ -592,7 +592,7 @@ export const checkMmprojExists = async (modelId: string): Promise<boolean> => {
 export const isModelSupported = async (
   modelPath: string,
   ctxSize?: number
-): Promise<'RED' | 'YELLOW' | 'GREEN'> => {
+): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY'> => {
   try {
     const engine = getEngine('llamacpp') as AIEngine & {
       isModelSupported?: (
@@ -608,6 +608,6 @@ export const isModelSupported = async (
     return 'YELLOW' // Conservative fallback
   } catch (error) {
     console.error(`Error checking model support for ${modelPath}:`, error)
-    return 'RED' // Error state, assume not supported
+    return 'GREY' // Error state, assume not supported
   }
 }