fix: handle checking compatible gated model

web-app/src/containers/ModelInfoHoverCard.tsx

@@ -79,6 +79,15 @@ export const ModelInfoHoverCard = ({
           </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 @@ export const ModelInfoHoverCard = ({
               <>
                 <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/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?: (
@@ -600,6 +600,7 @@ export const isModelSupported = async (
         ctx_size?: number
       ) => Promise<'RED' | 'YELLOW' | 'GREEN'>
     }
+    console.log(engine, 'engine')
     if (engine && typeof engine.isModelSupported === 'function') {
       return await engine.isModelSupported(modelPath, ctxSize)
     }
@@ -608,6 +609,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
   }
 }