Remove display_name from local model API and use model ID everywhere (#7382)

ui/desktop/src/api/types.gen.ts

@@ -549,7 +549,6 @@ export type LoadedProvider = {
 };
 
 export type LocalModelResponse = {
-    display_name: string;
     filename: string;
     id: string;
     quantization: string;

ui/desktop/src/components/LocalModelSetup.tsx

@@ -239,7 +239,7 @@ export function LocalModelSetup({ onSuccess, onCancel }: LocalModelSetupProps) {
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
                     <span className="font-medium text-text-default text-sm sm:text-base">
-                      {recommended.display_name}
+                      {recommended.id}
                     </span>
                     {recommended.status.state === 'Downloaded' && (
                       <span className="text-xs bg-green-600 text-white px-2 py-0.5 rounded-full">
@@ -294,7 +294,7 @@ export function LocalModelSetup({ onSuccess, onCancel }: LocalModelSetupProps) {
                         />
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2 flex-wrap">
-                            <span className="font-medium text-text-default text-sm">{model.display_name}</span>
+                            <span className="font-medium text-text-default text-sm">{model.id}</span>
                             <span className="text-xs text-text-muted">{formatSize(model.size_bytes)}</span>
                             {model.status.state === 'Downloaded' && (
                               <span className="text-xs bg-green-600 text-white px-2 py-0.5 rounded-full">
@@ -318,9 +318,9 @@ export function LocalModelSetup({ onSuccess, onCancel }: LocalModelSetupProps) {
             className="w-full px-6 py-3 bg-background-muted text-text-default rounded-lg transition-colors font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-background-muted/80"
           >
             {selectedModel?.status.state === 'Downloaded'
-              ? `Use ${selectedModel.display_name}`
+              ? `Use ${selectedModel.id}`
               : selectedModel
-                ? `Download ${selectedModel.display_name} (${formatSize(selectedModel.size_bytes)})`
+                ? `Download ${selectedModel.id} (${formatSize(selectedModel.size_bytes)})`
                 : 'Select a model'}
           </button>
 
@@ -338,7 +338,7 @@ export function LocalModelSetup({ onSuccess, onCancel }: LocalModelSetupProps) {
         <div className="space-y-6">
           <div className="border border-border-subtle rounded-xl p-5 sm:p-6 bg-background-default">
             <p className="font-medium text-text-default text-sm sm:text-base mb-4">
-              Downloading {selectedModel.display_name}
+              Downloading {selectedModel.id}
             </p>
 
             {downloadProgress ? (

ui/desktop/src/components/settings/localInference/LocalInferenceSettings.tsx

@@ -37,14 +37,6 @@ export const LocalInferenceSettings = () => {
   const downloadSectionRef = useRef<HTMLDivElement>(null);
   const selectedModelId = currentProvider === 'local' ? currentModel : null;
 
-  const getDisplayName = useCallback(
-    (modelId: string): string => {
-      const model = models.find((m) => m.id === modelId);
-      return model?.display_name || modelId;
-    },
-    [models]
-  );
-
   const loadModels = useCallback(async () => {
     try {
       const response = await listLocalModels();
@@ -195,7 +187,6 @@ export const LocalInferenceSettings = () => {
           <div className="space-y-2">
             {Array.from(downloads.entries()).map(([modelId, progress]) => {
               if (progress.status === 'completed') return null;
-              const displayName = getDisplayName(modelId);
               return (
                 <div
                   key={modelId}
@@ -203,7 +194,7 @@ export const LocalInferenceSettings = () => {
                 >
                   <div className="flex items-center justify-between mb-2">
                     <span className="text-sm font-medium text-text-default truncate">
-                      {displayName}
+                      {modelId}
                     </span>
                     {progress.status === 'downloading' && (
                       <Button
@@ -283,7 +274,7 @@ export const LocalInferenceSettings = () => {
                         className="cursor-pointer"
                       />
                       <span className="text-sm font-medium text-text-default">
-                        {model.display_name}
+                        {model.id}
                       </span>
                       <span className="text-xs text-text-muted">
                         {formatBytes(model.size_bytes)}
@@ -334,7 +325,7 @@ export const LocalInferenceSettings = () => {
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 flex-wrap">
                       <h4 className="text-sm font-medium text-text-default">
-                        {model.display_name}
+                        {model.id}
                       </h4>
                       <span className="text-xs text-text-muted">
                         {formatBytes(model.size_bytes)}
@@ -400,7 +391,7 @@ export const LocalInferenceSettings = () => {
         <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-xl">
           <DialogHeader>
             <DialogTitle>Model Settings</DialogTitle>
-            <p className="text-sm text-text-muted">{getDisplayName(settingsOpenFor || '')}</p>
+            <p className="text-sm text-text-muted">{settingsOpenFor || ''}</p>
           </DialogHeader>
           {settingsOpenFor && <ModelSettingsPanel modelId={settingsOpenFor} />}
         </DialogContent>