From 73d3c9d3e46499a036a38844be072536be88114c Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Tue, 16 Dec 2025 18:36:23 +0800
Subject: [PATCH] ui(models): display model ID in global model form dialog

Show model ID below model name in the dropdown list for better clarity
when selecting models, with appropriate text styling for selected state.
---
 .../models/components/GlobalModelFormDialog.vue        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/models/components/GlobalModelFormDialog.vue b/frontend/src/features/models/components/GlobalModelFormDialog.vue
index c56f359..949c9ed 100644
--- a/frontend/src/features/models/components/GlobalModelFormDialog.vue
+++ b/frontend/src/features/models/components/GlobalModelFormDialog.vue
@@ -68,13 +68,19 @@
                 <div
                   v-for="model in group.models"
                   :key="model.modelId"
-                  class="flex items-center gap-2 pl-7 pr-2.5 py-1.5 cursor-pointer text-xs border-t"
+                  class="flex flex-col gap-0.5 pl-7 pr-2.5 py-1.5 cursor-pointer text-xs border-t"
                   :class="selectedModel?.modelId === model.modelId && selectedModel?.providerId === model.providerId
                     ? 'bg-primary text-primary-foreground'
                     : 'hover:bg-muted'"
                   @click="selectModel(model)"
                 >
-                  <span class="truncate">{{ model.modelName }}</span>
+                  <span class="truncate font-medium">{{ model.modelName }}</span>
+                  <span
+                    class="truncate text-[10px]"
+                    :class="selectedModel?.modelId === model.modelId && selectedModel?.providerId === model.providerId
+                      ? 'text-primary-foreground/70'
+                      : 'text-muted-foreground'"
+                  >{{ model.modelId }}</span>
                 </div>
               </div>
             </div>