110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
import type { ProviderCapability } from '../../types'
|
|
|
|
interface ProviderPanelProps {
|
|
providers: ProviderCapability[]
|
|
loadingCapabilities: boolean
|
|
capabilitiesError: string | null
|
|
onRefresh: () => void
|
|
}
|
|
|
|
export function ProviderPanel({
|
|
providers,
|
|
loadingCapabilities,
|
|
capabilitiesError,
|
|
onRefresh,
|
|
}: ProviderPanelProps): JSX.Element {
|
|
return (
|
|
<section className="system-provider-panel">
|
|
<div className="system-provider-shell">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<h2>Provider Capabilities</h2>
|
|
<p className="muted">Review configured local providers and honest not-configured external sources.</p>
|
|
</div>
|
|
<button type="button" className="secondary-action" onClick={onRefresh} disabled={loadingCapabilities}>
|
|
Refresh providers
|
|
</button>
|
|
</div>
|
|
|
|
<div className="system-provider-state-stack">
|
|
{loadingCapabilities ? (
|
|
<div className="result-state result-state-loading">
|
|
<strong>Loading provider capabilities.</strong>
|
|
<p>Checking local, fixture and external provider registry states.</p>
|
|
</div>
|
|
) : null}
|
|
{capabilitiesError ? (
|
|
<div className="result-state result-state-error">
|
|
<strong>Provider registry unavailable.</strong>
|
|
<p>{capabilitiesError}</p>
|
|
</div>
|
|
) : null}
|
|
{providers.length === 0 && !loadingCapabilities ? (
|
|
<div className="result-state result-state-empty">
|
|
<strong>No providers reported by backend.</strong>
|
|
<p>Refresh provider capabilities after the backend is reachable.</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="system-provider-capability-surface" aria-label="Provider capability registry">
|
|
<ul className="system-provider-list">
|
|
{providers.map((provider) => (
|
|
<li className="system-provider-card" key={provider.provider_name}>
|
|
<div className="system-provider-header">
|
|
<div>
|
|
<strong>{provider.display_name}</strong>
|
|
<span>{provider.provider_name}</span>
|
|
</div>
|
|
<span className={provider.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{provider.status}</span>
|
|
</div>
|
|
<div className="system-provider-grid">
|
|
<div>
|
|
<span>Authority</span>
|
|
<strong>{provider.authority_level}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Configured</span>
|
|
<strong>{provider.configured ? 'yes' : 'no'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Geometry</span>
|
|
<strong>{provider.supported_geometry_types.join(', ')}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Query modes</span>
|
|
<strong>{provider.supported_query_modes.join(', ')}</strong>
|
|
</div>
|
|
</div>
|
|
<div className="provider-layer-list" aria-label={`${provider.provider_name} supported layers`}>
|
|
{provider.supported_layers.map((layer) => (
|
|
<span className="provider-layer-chip" key={layer}>
|
|
{layer}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className="provider-detail-stack">
|
|
<div>limitation: {provider.limitation_message}</div>
|
|
{!provider.configured && provider.not_configured_reason ? (
|
|
<div>reason: {provider.not_configured_reason}</div>
|
|
) : null}
|
|
</div>
|
|
<div className="provider-provenance-grid">
|
|
<div className="provider-provenance-card">
|
|
<span>Attribution</span>
|
|
<strong>{provider.attribution}</strong>
|
|
</div>
|
|
<div className="provider-provenance-card">
|
|
<span>License</span>
|
|
<strong>{provider.license_note}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|