From 96eef3c6b4c6ad3449529bec9767c5a70fa41a2b Mon Sep 17 00:00:00 2001 From: 9qeklajc Date: Wed, 23 Sep 2026 21:31:39 +0200 Subject: [PATCH] feat: improve certification workspace --- .../provider-certification-dialog.tsx | 609 ++++++++++-------- 1 file changed, 355 insertions(+), 254 deletions(-) diff --git a/ui/components/provider-certification-dialog.tsx b/ui/components/provider-certification-dialog.tsx index bfe988bf..afa34d29 100644 --- a/ui/components/provider-certification-dialog.tsx +++ b/ui/components/provider-certification-dialog.tsx @@ -221,6 +221,7 @@ export function ProviderCertificationDialog({ onOpenChange, }: ProviderCertificationDialogProps) { const [checkCache, setCheckCache] = useState(true); + const [workspaceTab, setWorkspaceTab] = useState<'setup' | 'results'>('setup'); const [selectedModelIds, setSelectedModelIds] = useState([]); const [pathModes, setPathModes] = useState>({}); const [selectedModelPaths, setSelectedModelPaths] = useState< @@ -250,6 +251,7 @@ export function ProviderCertificationDialog({ }) => { const completed: ModelCertificationResult[] = []; setResults([]); + setWorkspaceTab('results'); for (const [index, run] of modelRuns.entries()) { setCurrentModel({ @@ -296,6 +298,7 @@ export function ProviderCertificationDialog({ useEffect(() => { if (!open) { resetCertification(); + setWorkspaceTab('setup'); setSelectedModelIds([]); setPathModes({}); setSelectedModelPaths({}); @@ -419,8 +422,8 @@ export function ProviderCertificationDialog({ return ( - - + + Certify upstream models Select models, then use the provider default, choose specific @@ -429,268 +432,366 @@ export function ProviderCertificationDialog({ -
-
- -
- - {selectedModelIds.length} selected - - {selectedModelIds.length > 0 && !certify.isPending && ( - + + setWorkspaceTab(value as 'setup' | 'results') + } + className='min-h-0 flex-1 overflow-hidden' + > + + Setup + + Results + {(certify.isPending || results.length > 0) && ( + + {results.length}/{targetCount} + )} -
-
- - - - - {models.isLoading ? 'Loading models…' : 'No models found'} - - {renderModelGroup('Configured models', configuredOptions)} - {renderModelGroup('Discovered models', discoveredOptions)} - - - {models.isError && ( -

- {getErrorMessage(models.error)} -

- )} - {selectedModelIds.map((modelId) => { - const paths = pathsForModel(modelId); - const mode = pathModes[modelId] ?? 'default'; - const selectedPaths = selectedModelPaths[modelId] ?? []; - return ( -
-
-
- {namesById.get(modelId) ?? modelId} -
-
- {modelId} + + + + +
+
+
+ +
+ + {selectedModelIds.length} selected + + {selectedModelIds.length > 0 && !certify.isPending && ( + + )}
- {paths.length > 0 ? ( - <> - { - if (!value) return; - setPathModes((current) => ({ - ...current, - [modelId]: value as ModelPathMode, - })); - }} - disabled={certify.isPending} - className='w-full justify-start' - > - Default - Choose paths - All paths - - {mode === 'default' && ( -

- Uses the upstream provider's normal model routing. -

- )} - {mode === 'selected' && ( - - - - - -
- {paths.map((path) => { - const checked = selectedPaths.includes(path.path); - return ( - - ); - })} -
- - - )} - {mode === 'all' && ( -

- All {paths.length} paths will run in parallel. -

- )} - - ) : ( -

- Only the provider default route is available. + + + + + {models.isLoading ? 'Loading models…' : 'No models found'} + + {renderModelGroup('Configured models', configuredOptions)} + {renderModelGroup('Discovered models', discoveredOptions)} + + + {models.isError && ( +

+ {getErrorMessage(models.error)}

)}
- ); - })} - {modelsNeedingPath.length > 0 && ( -

- Choose at least one path for each model using “Choose paths”. -

- )} -
-
-
- setCheckCache(value === true)} - disabled={certify.isPending} - /> - -
- -
- - {currentModel && ( -
- - Probing {namesById.get(currentModel.id) ?? currentModel.id} - {currentModel.pathCount > 1 - ? ` across ${currentModel.pathCount} paths in parallel` - : ''}{' '} - — model {currentModel.index} of {currentModel.total} -
- )} - - {results.length > 0 && ( - result.resultKey).join('|')} - defaultValue={results[0].resultKey} - className='space-y-3' - > -
- - {results.map((result) => { - const status = resultStatus(result); - const Icon = - status === 'error' ? XCircle : STATUS_STYLES[status].icon; - return ( - - { + const paths = pathsForModel(modelId); + const mode = pathModes[modelId] ?? 'default'; + const selectedPaths = selectedModelPaths[modelId] ?? []; + return ( +
+
+
+ {namesById.get(modelId) ?? modelId} +
+
+ {modelId} +
+
+ {paths.length > 0 ? ( + <> + { + if (!value) return; + setPathModes((current) => ({ + ...current, + [modelId]: value as ModelPathMode, + })); + }} + disabled={certify.isPending} + className='w-full justify-start' + > + Default + + Choose paths + + All paths + + {mode === 'default' && ( +

+ Uses the upstream provider's normal model routing. +

)} - /> - - {namesById.get(result.modelId) ?? result.modelId} ·{' '} - {result.pathLabel} - - - ); - })} - -
- {results.map((result) => ( - - {result.report ? ( - - ) : ( -
- {result.error ?? 'Certification failed'} + {mode === 'selected' && ( + + + + + +
+ {paths.map((path) => { + const checked = selectedPaths.includes( + path.path + ); + return ( + + ); + })} +
+ + + )} + {mode === 'all' && ( +

+ All {paths.length} paths will run in parallel. +

+ )} + + ) : ( +

+ Only the provider default route is available. +

+ )}
+ ); + })} + {modelsNeedingPath.length > 0 && ( +

+ Choose at least one path for each model using “Choose paths”. +

+ )} +
+ +
+
+ setCheckCache(value === true)} + disabled={certify.isPending} + /> + +
+ +
+ + + + {currentModel && ( +
+ + + Probing {namesById.get(currentModel.id) ?? currentModel.id} + {currentModel.pathCount > 1 + ? ` across ${currentModel.pathCount} paths in parallel` + : ''}{' '} + — model {currentModel.index} of {currentModel.total} + +
+ )} + + {results.length === 0 ? ( +
+ Results will appear here as certification completes. +
+ ) : ( + result.resultKey).join('|')} + defaultValue={results[0].resultKey} + className='min-h-0 flex-1 overflow-hidden' + > +
+ + {results.map((result, index) => { + const status = resultStatus(result); + const Icon = + status === 'error' + ? XCircle + : STATUS_STYLES[status].icon; + const modelRouteNumber = results + .slice(0, index + 1) + .filter((item) => item.modelId === result.modelId).length; + const modelRouteCount = results.filter( + (item) => item.modelId === result.modelId + ).length; + return ( + + + + {namesById.get(result.modelId) ?? result.modelId} + + {modelRouteCount > 1 && ( + + {modelRouteNumber} + + )} + + ); + })} + +
+ +
+ {results.map((result) => { + const status = resultStatus(result); + return ( + +
+
+
+ {namesById.get(result.modelId) ?? result.modelId} +
+ {status === 'error' ? ( + + Error + + ) : ( + + )} +
+
+ + Model path + +
+ {result.pathLabel} +
+
+
+ {result.report ? ( + + ) : ( +
+ {result.error ?? 'Certification failed'} +
+ )} + + ); + })} +
+ + )} + +
);