From 887bd14774a7655acbb4c9162a07a769f0b66c19 Mon Sep 17 00:00:00 2001
From: Shroominic <db2002dominic@gmail.com>
Date: Sat, 1 Nov 2025 13:35:21 +0800
Subject: [PATCH] simplify models/providers UI

---
 ui/app/providers/page.tsx | 154 +++++++++++++++++++++++++-------------
 1 file changed, 103 insertions(+), 51 deletions(-)

diff --git a/ui/app/providers/page.tsx b/ui/app/providers/page.tsx
index ce7b4d2b..769eb724 100644
--- a/ui/app/providers/page.tsx
+++ b/ui/app/providers/page.tsx
@@ -443,46 +443,12 @@ export default function ProvidersPage() {
                               </div>
                             ) : providerModels &&
                               viewingModels === provider.id ? (
-                              <Tabs defaultValue='remote' className='w-full'>
-                                <TabsList className='grid w-full grid-cols-2'>
-                                  <TabsTrigger
-                                    value='remote'
-                                    className='text-xs sm:text-sm'
-                                  >
-                                    <span className='hidden sm:inline'>
-                                      Remote Models
-                                    </span>
-                                    <span className='sm:hidden'>Remote</span>
-                                    <Badge
-                                      variant='secondary'
-                                      className='ml-1 text-xs sm:ml-2'
-                                    >
-                                      {providerModels.remote_models.length}
-                                    </Badge>
-                                  </TabsTrigger>
-                                  <TabsTrigger
-                                    value='db'
-                                    className='text-xs sm:text-sm'
-                                  >
-                                    <span className='hidden sm:inline'>
-                                      Database Models
-                                    </span>
-                                    <span className='sm:hidden'>DB</span>
-                                    <Badge
-                                      variant='secondary'
-                                      className='ml-1 text-xs sm:ml-2'
-                                    >
-                                      {providerModels.db_models.length}
-                                    </Badge>
-                                  </TabsTrigger>
-                                </TabsList>
-                                <TabsContent
-                                  value='db'
-                                  className='mt-4 space-y-2'
-                                >
+                              providerModels.remote_models.length === 0 ? (
+                                // No provided models - show custom models directly without tabs
+                                <div className='space-y-2'>
                                   {providerModels.db_models.length === 0 ? (
                                     <div className='text-muted-foreground py-4 text-center text-sm'>
-                                      No database models configured
+                                      No models configured. Add custom models to use this provider.
                                     </div>
                                   ) : (
                                     <div className='space-y-2'>
@@ -521,16 +487,102 @@ export default function ProvidersPage() {
                                       ))}
                                     </div>
                                   )}
-                                </TabsContent>
-                                <TabsContent
-                                  value='remote'
-                                  className='mt-4 space-y-2'
-                                >
-                                  {providerModels.remote_models.length === 0 ? (
-                                    <div className='text-muted-foreground py-4 text-center text-sm'>
-                                      No remote models available
-                                    </div>
-                                  ) : (
+                                </div>
+                              ) : (
+                                // Has provided models - show tabs
+                                <Tabs defaultValue='provided' className='w-full'>
+                                  <TabsList className='grid w-full grid-cols-2'>
+                                    <TabsTrigger
+                                      value='provided'
+                                      className='text-xs sm:text-sm'
+                                    >
+                                      <span className='hidden sm:inline'>
+                                        Provided Models
+                                      </span>
+                                      <span className='sm:hidden'>Provided</span>
+                                      <Badge
+                                        variant='secondary'
+                                        className='ml-1 text-xs sm:ml-2'
+                                      >
+                                        {providerModels.remote_models.length}
+                                      </Badge>
+                                    </TabsTrigger>
+                                    <TabsTrigger
+                                      value='custom'
+                                      className='text-xs sm:text-sm'
+                                    >
+                                      <span className='hidden sm:inline'>
+                                        Custom Models
+                                      </span>
+                                      <span className='sm:hidden'>Custom</span>
+                                      <Badge
+                                        variant='secondary'
+                                        className='ml-1 text-xs sm:ml-2'
+                                      >
+                                        {providerModels.db_models.length}
+                                      </Badge>
+                                    </TabsTrigger>
+                                  </TabsList>
+                                  <TabsContent
+                                    value='custom'
+                                    className='mt-4 space-y-2'
+                                  >
+                                    {providerModels.db_models.length > 0 && (
+                                      <div className='text-muted-foreground mb-3 text-sm'>
+                                        Custom models override or extend the provider's catalog.
+                                      </div>
+                                    )}
+                                    {providerModels.db_models.length === 0 ? (
+                                      <div className='text-muted-foreground py-4 text-center text-sm'>
+                                        No custom models configured
+                                      </div>
+                                    ) : (
+                                      <div className='space-y-2'>
+                                        {providerModels.db_models.map((model) => (
+                                          <div
+                                            key={model.id}
+                                            className='hover:bg-accent flex flex-col gap-2 rounded-lg border p-3 transition-colors sm:flex-row sm:items-center sm:justify-between'
+                                          >
+                                            <div className='min-w-0 flex-1'>
+                                              <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
+                                                <span className='truncate font-mono text-sm font-medium'>
+                                                  {model.id}
+                                                </span>
+                                                <Badge
+                                                  variant={
+                                                    model.enabled
+                                                      ? 'default'
+                                                      : 'secondary'
+                                                  }
+                                                  className='w-fit text-xs'
+                                                >
+                                                  {model.enabled
+                                                    ? 'Enabled'
+                                                    : 'Disabled'}
+                                                </Badge>
+                                              </div>
+                                              <div className='text-muted-foreground mt-1 text-xs break-words'>
+                                                {model.description || model.name}
+                                              </div>
+                                            </div>
+                                            <div className='text-muted-foreground text-xs whitespace-nowrap'>
+                                              {model.context_length?.toLocaleString()}{' '}
+                                              tokens
+                                            </div>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                  </TabsContent>
+                                  <TabsContent
+                                    value='provided'
+                                    className='mt-4 space-y-2'
+                                  >
+                                    {providerModels.remote_models.length > 0 && (
+                                      <div className='text-muted-foreground mb-3 text-sm'>
+                                        Models automatically discovered from the provider's catalog.
+                                      </div>
+                                    )}
                                     <div className='space-y-2'>
                                       {providerModels.remote_models.map(
                                         (model) => (
@@ -555,9 +607,9 @@ export default function ProvidersPage() {
                                         )
                                       )}
                                     </div>
-                                  )}
-                                </TabsContent>
-                              </Tabs>
+                                  </TabsContent>
+                                </Tabs>
+                              )
                             ) : null}
                           </div>
                         )}