From 9665bdb2078bbe068deee890ed8d34aa7e1c9de2 Mon Sep 17 00:00:00 2001 From: israel Date: Fri, 22 May 2026 13:52:03 +0100 Subject: [PATCH 1/2] =?UTF-8?q?refactor(platform):=20provider=20drawer=20?= =?UTF-8?q?=E2=80=94=20headers=20outside=20Card,=20ghost=20buttons,=20coll?= =?UTF-8?q?apsible=20options=20guide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move section headers (General, API Key, Default Models, Provider Options, Models) outside the Card so each section is a header + content pair instead of an enclosed Card with internal `SectionHeader`. Drops the bespoke `SectionHeader` helper. - Switch inline Edit/Test/Add Model/Fetch from Provider actions to ghost `Button` for visual consistency. - Tighten InfoRow padding (px-5 py-3.5 → px-4 py-2.5) and align="start" so multi-line values wrap cleanly; rebuild the skeleton to mirror the new layout. - Render the long provider-options copy through `CollapsibleGuide` with markdown — bold headings, bullet lists, fenced ```json blocks — and add `providers.providerOptions.guideLabel` in en/de/fr. Update `CollapsibleGuide` to style `
` blocks.
- Fix row-level Edit on the providers table: wrap `ProviderEditPanel` in a `ProviderEditPanelLoader` that fetches config + hash and supplies `ProviderConfigProvider`, otherwise `useProviderConfig` throws.
- Minor: `Card` radius `rounded-xl` → `rounded-lg`; tabs list `min-w-full justify-around` so the underline spans the container; `provider-add-panel` Models header matches drawer styling.
---
 .../ui/data-display/collapsible-guide.tsx     |  10 +-
 .../app/components/ui/layout/card.tsx         |   2 +-
 .../app/components/ui/navigation/tabs.tsx     |   2 +-
 .../components/provider-add-panel.tsx         |  14 +-
 .../components/provider-detail-drawer.tsx     | 350 ++++++++++--------
 .../components/provider-options-editor.tsx    |  49 ++-
 .../providers/components/providers-table.tsx  |  51 ++-
 services/platform/messages/de.json            |   5 +-
 services/platform/messages/en.json            |   5 +-
 services/platform/messages/fr.json            |   5 +-
 10 files changed, 288 insertions(+), 205 deletions(-)

diff --git a/services/platform/app/components/ui/data-display/collapsible-guide.tsx b/services/platform/app/components/ui/data-display/collapsible-guide.tsx
index 5789fc86a..d320558f0 100644
--- a/services/platform/app/components/ui/data-display/collapsible-guide.tsx
+++ b/services/platform/app/components/ui/data-display/collapsible-guide.tsx
@@ -34,7 +34,7 @@ export function CollapsibleGuide({
       

         
             ),
+            pre: ({ children, ...rest }) => (
+              
+                {children}
+              

+            ),
           }}
         >
           {content}
diff --git a/services/platform/app/components/ui/layout/card.tsx b/services/platform/app/components/ui/layout/card.tsx
index 3b8dbbe63..1d67f018a 100644
--- a/services/platform/app/components/ui/layout/card.tsx
+++ b/services/platform/app/components/ui/layout/card.tsx
@@ -29,7 +29,7 @@ export function Card({
   return (
     

diff --git a/services/platform/app/components/ui/navigation/tabs.tsx b/services/platform/app/components/ui/navigation/tabs.tsx
index ebd7db946..8f4fbe2a6 100644
--- a/services/platform/app/components/ui/navigation/tabs.tsx
+++ b/services/platform/app/components/ui/navigation/tabs.tsx
@@ -30,7 +30,7 @@ interface TabsProps {
 }
 
 const listVariants = cva(
-  'scrollbar-hide inline-flex items-center overflow-x-auto text-muted-foreground',
+  'scrollbar-hide inline-flex items-center overflow-x-auto text-muted-foreground min-w-full justify-around',
   {
     variants: {
       variant: {
diff --git a/services/platform/app/features/settings/providers/components/provider-add-panel.tsx b/services/platform/app/features/settings/providers/components/provider-add-panel.tsx
index 070cdacb4..ab8cea503 100644
--- a/services/platform/app/features/settings/providers/components/provider-add-panel.tsx
+++ b/services/platform/app/features/settings/providers/components/provider-add-panel.tsx
@@ -616,14 +616,14 @@ export function ProviderAddPanel({
             {/* ── Models section ─────────────────────────────── */}
             
               
-                
+                
                   {t('providers.models')}
                 
-                
+                
                   {canFetch && (
                     
-    
-  );
-}
-
 function GeneralSection({
   providerName,
   organizationId,
@@ -346,13 +355,17 @@ function GeneralSection({
   const [panelOpen, setPanelOpen] = useState(false);
 
   return (
-    <>
+    
+      
+        
+          {t('providers.general')}
+        
+        
+      
       
-         setPanelOpen(true)}
-          editLabel={t('providers.editGeneral')}
-        />
         
           {config.displayName}
         
@@ -370,7 +383,7 @@ function GeneralSection({
         providerName={providerName}
         organizationId={organizationId}
       />
-    
+    
   );
 }
 
@@ -397,29 +410,39 @@ function DefaultModelsSection({
 
   return (
     <>
-      
-         setPanelOpen(true)}
-          editLabel={t('providers.editDefaults')}
-        />
-        
-          {modelDisplayName(config.defaults?.chat)}
-        
-        
-          {modelDisplayName(config.defaults?.vision)}
-        
-        
-          {modelDisplayName(config.defaults?.embedding)}
-        
-        
-          {modelDisplayName(config.defaults?.['image-generation'])}
-        
-        
-          {modelDisplayName(config.defaults?.transcription)}
-        
-      
+      
+        
+          
+            
+              {t('providers.defaultModels')}
+            
+            
+              {t('providers.defaultModelsDescription')}
+            
+          
+          
+        
+        
+          
+            {modelDisplayName(config.defaults?.chat)}
+          
+          
+            {modelDisplayName(config.defaults?.vision)}
+          
+          
+            {modelDisplayName(config.defaults?.embedding)}
+          
+          
+            {modelDisplayName(config.defaults?.['image-generation'])}
+          
+          
+            {modelDisplayName(config.defaults?.transcription)}
+          
+        
+      
 
       
-      
-         setDialogOpen(true)}
-          editLabel={hasSecret ? t('providers.editKey') : t('providers.addKey')}
-        >
-          
-        
-        {hasSecret ? (
-          
-            
-              {t('providers.apiKeyConfigured')}
-            
-            
-              {maskedKey}
-            
-          
-        ) : (
-          
-            
-              {t('providers.apiKeyNotConfigured')}
-            
+      
+        
+          
+            {t('providers.apiKey')}
+          
+          
+            
+            
           
-        )}
-      
+        
+        
+          {hasSecret ? (
+            
+              
+                {t('providers.apiKeyConfigured')}
+              
+              
+                {maskedKey}
+              
+            
+          ) : (
+            
+              
+                {t('providers.apiKeyNotConfigured')}
+              
+            
+          )}
+        
+      
 
       
             {t('providers.models')}
           
-          
+          
             
             

         ) : (
           

-            

+            

                setSearchQuery(e.target.value)}
@@ -1515,6 +1550,7 @@ function ModelsSection({
                   description: t(
                     'providers.providerOptions.modelLevelDescription',
                   ),
+                  guideLabel: t('providers.providerOptions.guideLabel'),
                   helpText: t('providers.providerOptions.modelLevelHelp'),
                 }}
               />
diff --git a/services/platform/app/features/settings/providers/components/provider-options-editor.tsx b/services/platform/app/features/settings/providers/components/provider-options-editor.tsx
index 728d2d29d..df37e5a7b 100644
--- a/services/platform/app/features/settings/providers/components/provider-options-editor.tsx
+++ b/services/platform/app/features/settings/providers/components/provider-options-editor.tsx
@@ -6,6 +6,7 @@ import { Pencil, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { z } from 'zod';
 
+import { CollapsibleGuide } from '@/app/components/ui/data-display/collapsible-guide';
 import { ConfirmDialog } from '@/app/components/ui/dialog/confirm-dialog';
 import { JsonInput } from '@/app/components/ui/forms/json-input';
 import { Textarea } from '@/app/components/ui/forms/textarea';
@@ -106,6 +107,7 @@ interface Props {
   copy: {
     title: string;
     description: string;
+    guideLabel: string;
     notConfigured: string;
     editLabel: string;
     saveLabel: string;
@@ -232,25 +234,20 @@ export function ProviderOptionsEditor({
 
   return (
     <>
-      
-        
-          
-            {copy.title}
-            
-              {copy.description}
-            
-          
-          
+          
         
 
-        

+        
+
+        
           {isEmpty ? (
             
               {copy.notConfigured}
@@ -265,13 +262,13 @@ export function ProviderOptionsEditor({
             
               {initialJson}
             

           )}
-        

-      
+        
+      
 
        void;
   onClose: () => void;
@@ -337,6 +336,7 @@ interface SheetBodyProps {
 function ProviderOptionsEditorSheet({
   title,
   description,
+  guideLabel,
   draft,
   onDraftChange,
   onClose,
@@ -373,9 +373,7 @@ function ProviderOptionsEditorSheet({
       

         

           
-            
-              {description}
-            
+