Add provider_name field to model objects and improve display

- Add provider_name field to ApiModel schema and transformation logic
- Update model options to include providerName for better display
- Improve provider label fallback chain in model transformation
- Fix agent hook to use proper SWR key and conditional fetching
- Enhance option rendering with better truncation and provider display

src/main/apiServer/utils/index.ts

@@ -190,13 +190,21 @@ export async function validateModelId(
 
 export function transformModelToOpenAI(model: Model, providers: Provider[]): ApiModel {
   const provider = providers.find((p) => p.id === model.provider)
+  const providerDisplayName =
+    provider?.name ??
+    (provider as { providerName?: string })?.providerName ??
+    (provider as { displayName?: string })?.displayName ??
+    (model as { providerName?: string; providerDisplayName?: string })?.providerName ??
+    (model as { providerDisplayName?: string })?.providerDisplayName ??
+    provider?.id
   return {
     id: `${model.provider}:${model.id}`,
     object: 'model',
     name: model.name,
     created: Math.floor(Date.now() / 1000),
-    owned_by: model.owned_by || model.provider,
+    owned_by: model.owned_by || providerDisplayName || model.provider,
     provider: model.provider,
+    provider_name: providerDisplayName,
     provider_type: provider?.type,
     provider_model_id: model.id
   }

src/renderer/src/components/Popups/agent/AgentModal.tsx

@@ -194,7 +194,8 @@ export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, o
       key: model.id,
       label: model.name,
       avatar: getModelLogo(model.id),
-      providerId: model.provider
+      providerId: model.provider,
+      providerName: model.provider_name
     })) satisfies ModelOption[]
   }, [models])
 

src/renderer/src/components/Popups/agent/SessionModal.tsx

@@ -127,7 +127,8 @@ export const SessionModal: React.FC<Props> = ({ agentId, session, trigger, isOpe
       key: model.id,
       label: model.name,
       avatar: getModelLogo(model.id),
-      providerId: model.provider
+      providerId: model.provider,
+      providerName: model.provider_name
     })) satisfies ModelOption[]
   }, [models])
 

src/renderer/src/components/Popups/agent/shared.tsx

@@ -12,6 +12,7 @@ export interface BaseOption {
 
 export interface ModelOption extends BaseOption {
   providerId?: string
+  providerName?: string
 }
 
 export function isModelOption(option: BaseOption): option is ModelOption {
@@ -33,10 +34,18 @@ export const Option = ({ option }: { option?: BaseOption | null }) => {
       </div>
     )
   }
+  const providerLabel = (() => {
+    if (!isModelOption(option)) return null
+    if (option.providerName) return option.providerName
+    if (option.providerId) return getProviderLabel(option.providerId)
+    return null
+  })()
+
   return (
     <div className="flex gap-2">
       <Avatar src={option.avatar} className="h-5 w-5" />
-      {option.label} {isModelOption(option) && option.providerId && `| ${getProviderLabel(option.providerId)}`}
+      <span className="truncate">{option.label}</span>
+      {providerLabel ? <span className="truncate text-foreground-500">| {providerLabel}</span> : null}
     </div>
   )
 }

src/renderer/src/hooks/agents/useAgent.ts

@@ -9,15 +9,15 @@ import { useAgentClient } from './useAgentClient'
 export const useAgent = (id: string | null) => {
   const { t } = useTranslation()
   const client = useAgentClient()
-  const key = client.agentPaths.base
+  const key = id ? client.agentPaths.withId(id) : null
   const fetcher = useCallback(async () => {
-    if (id === null) {
+    if (!id) {
       return null
     }
     const result = await client.getAgent(id)
     return result
   }, [client, id])
-  const { data, error, isLoading, mutate } = useSWR(key, fetcher)
+  const { data, error, isLoading, mutate } = useSWR(key, id ? fetcher : null)
 
   const updateAgent = useCallback(
     async (form: UpdateAgentForm) => {

src/renderer/src/types/apiModels.ts

@@ -17,6 +17,7 @@ export const ApiModelSchema = z.object({
   name: z.string(),
   owned_by: z.string(),
   provider: z.string().optional(),
+  provider_name: z.string().optional(),
   provider_type: ProviderTypeSchema.optional(),
   provider_model_id: z.string().optional()
 })