@@ -101,10 +101,11 @@ export default function System() {
101101 setLoading ( true )
102102 setError ( null )
103103
104- const [ health , readiness , metrics , processor , clients ] = await Promise . allSettled ( [
104+ const [ health , readiness , metrics , diagnostics , processor , clients ] = await Promise . allSettled ( [
105105 systemApi . getHealth ( ) ,
106106 systemApi . getReadiness ( ) ,
107107 systemApi . getMetrics ( ) . catch ( ( ) => ( { data : null } ) ) , // Optional endpoint
108+ systemApi . getConfigDiagnostics ( ) . catch ( ( ) => ( { data : null } ) ) , // Optional endpoint
108109 systemApi . getProcessorStatus ( ) . catch ( ( ) => ( { data : null } ) ) , // Optional endpoint
109110 systemApi . getActiveClients ( ) . catch ( ( ) => ( { data : [ ] } ) ) , // Optional endpoint
110111 ] )
@@ -118,6 +119,9 @@ export default function System() {
118119 if ( metrics . status === 'fulfilled' && metrics . value . data ) {
119120 setMetricsData ( metrics . value . data )
120121 }
122+ if ( diagnostics . status === 'fulfilled' && diagnostics . value . data ) {
123+ setConfigDiagnostics ( diagnostics . value . data )
124+ }
121125 if ( processor . status === 'fulfilled' && processor . value . data ) {
122126 setProcessorStatus ( processor . value . data )
123127 }
@@ -311,6 +315,104 @@ export default function System() {
311315 </ div >
312316 ) }
313317
318+ { /* Configuration Diagnostics */ }
319+ { configDiagnostics && ( configDiagnostics . issues . length > 0 || configDiagnostics . warnings . length > 0 || configDiagnostics . info . length > 0 ) && (
320+ < div className = "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mb-6" >
321+ < div className = "flex items-center justify-between mb-4" >
322+ < h3 className = "text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center" >
323+ < AlertCircle className = "h-5 w-5 mr-2 text-blue-600" />
324+ Configuration Diagnostics
325+ </ h3 >
326+ < div className = "flex items-center space-x-2" >
327+ { configDiagnostics . overall_status === 'healthy' && < CheckCircle className = "h-5 w-5 text-green-500" /> }
328+ { configDiagnostics . overall_status === 'partial' && < AlertCircle className = "h-5 w-5 text-yellow-500" /> }
329+ { configDiagnostics . overall_status === 'unhealthy' && < XCircle className = "h-5 w-5 text-red-500" /> }
330+ < span className = { `text-sm font-semibold ${ getStatusColor ( configDiagnostics . overall_status ) } ` } >
331+ { configDiagnostics . overall_status . toUpperCase ( ) }
332+ </ span >
333+ </ div >
334+ </ div >
335+
336+ < div className = "space-y-3" >
337+ { /* Errors */ }
338+ { configDiagnostics . issues . map ( ( issue , idx ) => (
339+ < div key = { `error-${ idx } ` } className = "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-3" >
340+ < div className = "flex items-start space-x-2" >
341+ < XCircle className = "h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
342+ < div className = "flex-1" >
343+ < div className = "flex items-center space-x-2 mb-1" >
344+ < span className = "text-xs font-semibold text-red-700 dark:text-red-300 uppercase" >
345+ { issue . component }
346+ </ span >
347+ < span className = "text-xs px-2 py-0.5 bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 rounded" >
348+ ERROR
349+ </ span >
350+ </ div >
351+ < p className = "text-sm text-red-700 dark:text-red-300 mb-1" >
352+ { issue . message }
353+ </ p >
354+ { issue . resolution && (
355+ < p className = "text-xs text-red-600 dark:text-red-400" >
356+ 💡 { issue . resolution }
357+ </ p >
358+ ) }
359+ </ div >
360+ </ div >
361+ </ div >
362+ ) ) }
363+
364+ { /* Warnings */ }
365+ { configDiagnostics . warnings . map ( ( warning , idx ) => (
366+ < div key = { `warning-${ idx } ` } className = "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3" >
367+ < div className = "flex items-start space-x-2" >
368+ < AlertCircle className = "h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
369+ < div className = "flex-1" >
370+ < div className = "flex items-center space-x-2 mb-1" >
371+ < span className = "text-xs font-semibold text-yellow-700 dark:text-yellow-300 uppercase" >
372+ { warning . component }
373+ </ span >
374+ < span className = "text-xs px-2 py-0.5 bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded" >
375+ WARNING
376+ </ span >
377+ </ div >
378+ < p className = "text-sm text-yellow-700 dark:text-yellow-300 mb-1" >
379+ { warning . message }
380+ </ p >
381+ { warning . resolution && (
382+ < p className = "text-xs text-yellow-600 dark:text-yellow-400" >
383+ 💡 { warning . resolution }
384+ </ p >
385+ ) }
386+ </ div >
387+ </ div >
388+ </ div >
389+ ) ) }
390+
391+ { /* Info */ }
392+ { configDiagnostics . info . map ( ( info , idx ) => (
393+ < div key = { `info-${ idx } ` } className = "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-3" >
394+ < div className = "flex items-start space-x-2" >
395+ < CheckCircle className = "h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
396+ < div className = "flex-1" >
397+ < div className = "flex items-center space-x-2 mb-1" >
398+ < span className = "text-xs font-semibold text-blue-700 dark:text-blue-300 uppercase" >
399+ { info . component }
400+ </ span >
401+ < span className = "text-xs px-2 py-0.5 bg-blue-200 dark:bg-blue-800 text-blue-800 dark:text-blue-200 rounded" >
402+ INFO
403+ </ span >
404+ </ div >
405+ < p className = "text-sm text-blue-700 dark:text-blue-300" >
406+ { info . message }
407+ </ p >
408+ </ div >
409+ </ div >
410+ </ div >
411+ ) ) }
412+ </ div >
413+ </ div >
414+ ) }
415+
314416 < div className = "grid grid-cols-1 lg:grid-cols-2 gap-6" >
315417 { /* Services Status */ }
316418 { healthData ?. services && (
0 commit comments