add error_reason to UI if import fails

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall.ts

@@ -46,13 +46,14 @@ export const addModelInstallEventListener = () => {
   startAppListening({
     actionCreator: socketModelInstallError,
     effect: (action, { dispatch }) => {
-      const { id } = action.payload.data;
+      const { id, error_type } = action.payload.data;
 
       dispatch(
         modelsApi.util.updateQueryData('getModelImports', undefined, (draft) => {
           const modelImport = draft.find((m) => m.id === id);
           if (modelImport) {
             modelImport.status = 'error';
+            modelImport.error_reason = error_type
           }
           return draft;
         })

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ImportQueue/ImportQueueBadge.tsx

@@ -12,7 +12,7 @@ const STATUSES = {
   cancelled: { colorScheme: 'orange', translationKey: 'queue.canceled' },
 };
 
-const ImportQueueBadge = ({ status, detail }: { status?: ModelInstallStatus; detail?: string }) => {
+const ImportQueueBadge = ({ status, errorReason }: { status?: ModelInstallStatus; errorReason?: string | null }) => {
   const { t } = useTranslation();
 
   if (!status) {
@@ -20,7 +20,7 @@ const ImportQueueBadge = ({ status, detail }: { status?: ModelInstallStatus; det
   }
 
   return (
-    <Tooltip label={detail}>
+    <Tooltip label={errorReason}>
       <Badge colorScheme={STATUSES[status].colorScheme}>{t(STATUSES[status].translationKey)}</Badge>
     </Tooltip>
   );

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ImportQueue/ImportQueueItem.tsx

@@ -116,7 +116,7 @@ export const ImportQueueItem = (props: ModelListItemProps) => {
         </Tooltip>
       </Flex>
       <Box w="15%">
-        <ImportQueueBadge status={model.status} />
+        <ImportQueueBadge status={model.status} errorReason={model.error_reason} />
       </Box>
 
       <Box w="10%">