Seems to be working

src/modules/llms/configurator/LLMListItem.tsx

@@ -33,9 +33,11 @@ export function LLMListItem(props: { llm: DLLM, vendor: ModelVendor }) {
 
         {/* 'Actions' (only click -> configure in reality) */}
         <Box sx={{ ml: 'auto', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          {llm.hidden && <IconButton disabled variant='plain' color='neutral'>
-            <VisibilityOffOutlinedIcon />
-          </IconButton>}
+          {llm.hidden && (
+            <IconButton disabled variant='plain' color='neutral'>
+              <VisibilityOffOutlinedIcon />
+            </IconButton>
+          )}
           <IconButton variant='plain' color='neutral'>
             <SettingsOutlinedIcon />
           </IconButton>

src/modules/llms/configurator/LLMSettings.tsx

@@ -53,7 +53,7 @@ export function LLMSettings(props: { id: DLLMId }) {
         <FormLabel sx={{ minWidth: 80 }}>
           Delete
         </FormLabel>
-        <IconButton variant='plain' color='danger' onClick={handleLlmDelete}>
+        <IconButton variant='plain' color='neutral' onClick={handleLlmDelete}>
           <DeleteOutlineIcon />
         </IconButton>
       </FormControl>

src/modules/llms/localai/LocalAISetup.tsx

@@ -6,13 +6,13 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload';
 
 import { apiQuery } from '~/modules/trpc/trpc.client';
 
-import { settingsGap } from '~/common/theme';
+import { FormInputKey } from '~/common/components/FormInputKey';
 import { Link } from '~/common/components/Link';
+import { settingsGap } from '~/common/theme';
 
 import { DLLM, DModelSource, DModelSourceId } from '../llm.types';
 import { normalizeSetup, SourceSetupLocalAI } from './vendor';
 import { useModelsStore, useSourceSetup } from '../llm.store';
-import { FormInputKey } from '~/common/components/FormInputKey';
 
 
 const urlSchema = z.string().url().startsWith('http');
@@ -21,15 +21,15 @@ const urlSchema = z.string().url().startsWith('http');
 export function LocalAISetup(props: { sourceId: DModelSourceId }) {
 
   // external state
-  const { normSetup: { hostUrl }, updateSetup, sourceLLMs, source } = useSourceSetup<SourceSetupLocalAI>(props.sourceId, normalizeSetup);
+  const { normSetup: { hostUrl }, updateSetup, /*sourceLLMs,*/ source } = useSourceSetup<SourceSetupLocalAI>(props.sourceId, normalizeSetup);
 
   // validate if url is a well formed proper url with zod
   const { success: isValidHost } = urlSchema.safeParse(hostUrl);
   const shallFetchSucceed = isValidHost;
 
   // fetch models
-  const { isFetching, refetch } = apiQuery.openai.listModels.useQuery({ oaiKey: '', oaiHost: hostUrl, oaiOrg: '', heliKey: '' }, {
-    enabled: !sourceLLMs.length && shallFetchSucceed,
+  const { isFetching, refetch, isError } = apiQuery.openai.listModels.useQuery({ oaiKey: '', oaiHost: hostUrl, oaiOrg: '', heliKey: '' }, {
+    enabled: false, //!sourceLLMs.length && shallFetchSucceed,
     onSuccess: models => {
       const llms = source ? models.map(model => localAIToDLLM(model, source)) : [];
       useModelsStore.getState().addLLMs(llms);
@@ -47,7 +47,7 @@ export function LocalAISetup(props: { sourceId: DModelSourceId }) {
     />
 
     <Button
-      variant='solid' color='neutral'
+      variant='solid' color={isError ? 'warning' : 'primary'}
       disabled={!shallFetchSucceed || isFetching}
       endDecorator={<FileDownloadIcon />}
       onClick={() => refetch()}

src/modules/llms/openai/OpenAIIcon.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { SvgIcon } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-export function Icon(props: { sx?: SxProps }) {
+export function OpenAIIcon(props: { sx?: SxProps }) {
   return <SvgIcon viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' fill='none' strokeLinecap='round' strokeLinejoin='round' {...props}>
     <path stroke='none' d='M0 0h24v24H0z' fill='none'></path>
     <path d='M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35'></path>

src/modules/llms/openai/OpenAILLMSettings.tsx

@@ -8,7 +8,7 @@ import { LLMSettingsOpenAI, normalizeLLMSettings } from './vendor';
 import { useModelsStore } from '../llm.store';
 
 
-export function LLMSettings(props: { llm: DLLM }) {
+export function OpenAILLMSettings(props: { llm: DLLM }) {
 
   // external state
   const updateLLMSettings = useModelsStore(state => state.updateLLMSettings<LLMSettingsOpenAI>);

src/modules/llms/openai/OpenAISourceSetup.tsx

@@ -18,7 +18,7 @@ import { normalizeSetup, SourceSetupOpenAI } from './vendor';
 import { useModelsStore, useSourceSetup } from '../llm.store';
 
 
-export function SourceSetup(props: { sourceId: DModelSourceId }) {
+export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
 
   // external state
   const {
@@ -31,7 +31,7 @@ export function SourceSetup(props: { sourceId: DModelSourceId }) {
   const shallFetchSucceed = oaiKey ? keyValid : hasServerKeyOpenAI;
 
   // fetch models
-  const { isFetching, refetch } = apiQuery.openai.listModels.useQuery({ oaiKey, oaiHost, oaiOrg, heliKey }, {
+  const { isFetching, refetch, isError } = apiQuery.openai.listModels.useQuery({ oaiKey, oaiHost, oaiOrg, heliKey }, {
     enabled: !sourceLLMs.length && shallFetchSucceed,
     onSuccess: models => {
       const llms = source ? models.map(model => openAIModelToDLLM(model, source)) : [];
@@ -112,7 +112,7 @@ export function SourceSetup(props: { sourceId: DModelSourceId }) {
 
 
     <Button
-      variant='solid' color='neutral'
+      variant='solid' color={isError ? 'warning' : 'primary'}
       disabled={!shallFetchSucceed || isFetching}
       endDecorator={<FileDownloadIcon />}
       onClick={() => refetch()}

src/modules/llms/openai/vendor.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 
 import { DLLM, DModelSource, DModelSourceId, ModelVendor } from '../llm.types';
-import { Icon } from './Icon';
-import { LLMSettings } from './LLMSettings';
-import { SourceSetup } from './SourceSetup';
+import { OpenAIIcon } from './OpenAIIcon';
+import { OpenAILLMSettings } from './OpenAILLMSettings';
+import { OpenAISourceSetup } from './OpenAISourceSetup';
 
 
 export const ModelVendorOpenAI: ModelVendor = {
   id: 'openai',
   name: 'OpenAI',
   rank: 10,
-  icon: <Icon />,
+  icon: <OpenAIIcon />,
   location: 'cloud',
   instanceLimit: 2,
 
@@ -22,8 +22,8 @@ export const ModelVendorOpenAI: ModelVendor = {
     vId: 'openai',
     setup: {},
   }),
-  createSourceSetupComponent: (sourceId: DModelSourceId) => <SourceSetup sourceId={sourceId} />,
-  createLLMSettingsComponent: (llm: DLLM) => <LLMSettings llm={llm} />,
+  createSourceSetupComponent: (sourceId: DModelSourceId) => <OpenAISourceSetup sourceId={sourceId} />,
+  createLLMSettingsComponent: (llm: DLLM) => <OpenAILLMSettings llm={llm} />,
 };