@tonyclaw/agent-inspector 3.0.23 → 3.0.24

package/src/components/providers/ProviderCard.tsx

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode, useState } from "react";
+import { type JSX, useState } from "react";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import {
@@ -8,15 +8,7 @@ import {
   Trash2,
   RotateCw,
   CheckCircle,
-  Minus,
   ExternalLink,
-  AlertCircle,
-  Wifi,
-  WifiOff,
-  Lock,
-  Gauge,
-  Server,
-  HelpCircle,
   Clock,
   Copy,
   Check,
@@ -31,13 +23,12 @@ import {
   providerHasContextMetadata,
 } from "../../lib/providerModelMetadata";
 import { formatContextWindowTokens } from "../../lib/utils";
-import type {
-  ProviderFormatTestResults,
-  ProviderTestErrorType as ErrorType,
-  ProviderTestResult as TestResult,
-  ProviderTestResults as TestResults,
-  ProviderTestState,
-} from "../../lib/providerTestContract";
+import type { ProviderTestResults as TestResults } from "../../lib/providerTestContract";
+import {
+  ProviderModelTestResultsView,
+  ProviderTestMatrix,
+  ProviderTestPill,
+} from "./ProviderTestResultsView";
 
 // Known provider documentation links (fallback when apiDocsUrl is not configured)
 const KNOWN_PROVIDER_DOCS: Record<string, string> = {
@@ -57,218 +48,14 @@ type ProviderCardProps = {
   isRefreshingMetadata?: boolean;
 };
 
-function hasSuccessField(result: ProviderTestState): result is TestResult {
-  return Object.prototype.hasOwnProperty.call(result, "success");
-}
-
-// Using Object.prototype.hasOwnProperty.call to avoid 'in' operator
-function isNotConfiguredState(result: ProviderTestState): result is { notConfigured: true } {
-  return Object.prototype.hasOwnProperty.call(result, "notConfigured");
-}
-
-function hasText(value: string | undefined): value is string {
-  return value !== undefined && value.trim() !== "";
-}
-
-function formatHeaders(headers: Record<string, string> | undefined): string | undefined {
-  if (headers === undefined) {
-    return undefined;
-  }
-
-  const lines = Object.entries(headers).map(([name, value]) => `${name}: ${value}`);
-  if (lines.length === 0) {
-    return undefined;
-  }
-
-  return lines.join("\n");
-}
-
-function hasHeaderDetails(headers: Record<string, string> | undefined): boolean {
-  return formatHeaders(headers) !== undefined;
-}
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-function formatTokenRate(tokensPerSecond: number): string {
-  if (tokensPerSecond >= 10) return `${tokensPerSecond.toFixed(0)}/s`;
-  return `${tokensPerSecond.toFixed(1)}/s`;
-}
-
-function hasDiagnosticDetails(result: TestResult): boolean {
-  const debug = result.debug;
-  return (
-    hasText(result.error?.hint) ||
-    hasText(result.error?.details) ||
-    hasText(result.rawResponse) ||
-    hasText(debug?.requestUrl) ||
-    hasText(debug?.requestBody) ||
-    hasText(debug?.responseBody) ||
-    hasHeaderDetails(debug?.requestHeaders) ||
-    hasHeaderDetails(debug?.responseHeaders) ||
-    debug?.responseStatus !== undefined
-  );
-}
-
-function DiagnosticSection({
-  title,
-  children,
-}: {
-  title: string;
-  children: ReactNode;
-}): JSX.Element {
-  return (
-    <div className="space-y-1">
-      <div className="font-medium text-foreground/80">{title}</div>
-      {children}
-    </div>
-  );
-}
-
-function DiagnosticPre({ value }: { value: string }): JSX.Element {
-  return (
-    <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded-md bg-background/80 p-2 font-mono text-[11px] leading-relaxed text-foreground/80">
-      {value}
-    </pre>
-  );
-}
-
-function ProviderTestDetails({ result }: { result: TestResult }): JSX.Element {
-  const debug = result.debug;
-  const requestUrl = debug?.requestUrl;
-  const requestMethod = debug?.requestMethod ?? "POST";
-  const requestHeaders = formatHeaders(debug?.requestHeaders);
-  const responseHeaders = formatHeaders(debug?.responseHeaders);
-  const responseStatus =
-    debug?.responseStatus !== undefined
-      ? `${debug.responseStatus}${
-          hasText(debug.responseStatusText) ? ` ${debug.responseStatusText}` : ""
-        }`
-      : undefined;
-  const responseBody = debug?.responseBody ?? result.rawResponse;
-
-  return (
-    <div className="max-h-80 max-w-full space-y-2 overflow-auto rounded-md border bg-muted/50 p-2 text-xs text-muted-foreground shadow-sm sm:w-[520px]">
-      {hasText(result.error?.hint) && (
-        <DiagnosticSection title="Hint">
-          <div>{result.error.hint}</div>
-        </DiagnosticSection>
-      )}
-      {hasText(result.error?.details) && (
-        <DiagnosticSection title="Error">
-          <DiagnosticPre value={result.error.details} />
-        </DiagnosticSection>
-      )}
-      {hasText(requestUrl) && (
-        <DiagnosticSection title="Request">
-          <div className="rounded-md bg-background/80 p-2 font-mono text-[11px] break-all text-foreground/80">
-            {requestMethod} {requestUrl}
-          </div>
-        </DiagnosticSection>
-      )}
-      {requestHeaders !== undefined && (
-        <DiagnosticSection title="Request Headers">
-          <DiagnosticPre value={requestHeaders} />
-        </DiagnosticSection>
-      )}
-      {hasText(debug?.requestBody) && (
-        <DiagnosticSection title="Request Body">
-          <DiagnosticPre value={debug.requestBody} />
-        </DiagnosticSection>
-      )}
-      {hasText(responseStatus) && (
-        <DiagnosticSection title="Response Status">
-          <div className="rounded-md bg-background/80 p-2 font-mono text-[11px] text-foreground/80">
-            {responseStatus}
-          </div>
-        </DiagnosticSection>
-      )}
-      {responseHeaders !== undefined && (
-        <DiagnosticSection title="Response Headers">
-          <DiagnosticPre value={responseHeaders} />
-        </DiagnosticSection>
-      )}
-      {hasText(responseBody) && (
-        <DiagnosticSection title="Response Body">
-          <DiagnosticPre value={responseBody} />
-        </DiagnosticSection>
-      )}
-    </div>
-  );
-}
-
-function ProviderFormatTestStatus({
-  results,
-}: {
-  results: ProviderFormatTestResults;
-}): JSX.Element {
-  return (
-    <div className="grid min-w-0 gap-2 sm:grid-cols-2">
-      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
-        <span className="text-[10px] text-muted-foreground">Non-stream</span>
-        <TestStatus result={results.nonStreaming} />
-      </div>
-      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
-        <span className="text-[10px] text-muted-foreground">Stream</span>
-        <TestStatus result={results.streaming} />
-      </div>
-    </div>
-  );
-}
-
-function ProviderFormatStatusBlock({
-  label,
-  children,
-}: {
-  label: string;
-  children?: ReactNode;
-}): JSX.Element {
-  return (
-    <div className="min-w-0 space-y-2 rounded-md border border-border/60 bg-muted/15 p-2">
-      <div className="text-xs font-medium text-foreground/80">{label}</div>
-      {children}
-    </div>
-  );
-}
-
 function providerHasEndpoint(value: string | undefined): value is string {
   return value !== undefined && value !== "";
 }
 
-function providerTestTargets(provider: ProviderConfig): string[] {
-  const targets: string[] = [];
-  if (providerHasEndpoint(provider.anthropicBaseUrl)) {
-    targets.push("Anthropic");
-  }
-  if (providerHasEndpoint(provider.openaiBaseUrl)) {
-    targets.push("Chat");
-  }
-  if (providerHasEndpoint(provider.openaiResponsesBaseUrl)) {
-    targets.push("Responses");
-  }
-  return targets;
-}
-
-type CapabilityChipTone = "active" | "quiet";
-
-function CapabilityChip({
-  label,
-  enabled,
-  tone,
-}: {
-  label: string;
-  enabled: boolean;
-  tone?: CapabilityChipTone;
-}): JSX.Element {
-  const resolvedTone: CapabilityChipTone = tone ?? (enabled ? "active" : "quiet");
-  const className = enabled
-    ? "border-border/70 bg-muted/25 text-foreground/80"
-    : "border-border/50 bg-transparent text-muted-foreground/70";
+function CapabilityChip({ label }: { label: string }): JSX.Element {
   return (
-    <span className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 ${className}`}>
-      {enabled ? <CheckCircle className="size-3" /> : <Minus className="size-3" />}
+    <span className="inline-flex items-center gap-1 rounded border border-border/70 bg-muted/25 px-1.5 py-0.5 text-foreground/80">
+      <CheckCircle className="size-3" />
       {label}
     </span>
   );
@@ -289,123 +76,13 @@ function ProviderCapabilitySummary({ provider }: { provider: ProviderConfig }):
 
   return (
     <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-      {hasAnthropic && <CapabilityChip label="Anthropic" enabled={true} />}
-      {hasChat && <CapabilityChip label="OpenAI Chat" enabled={true} />}
-      {hasResponses && <CapabilityChip label="OpenAI Responses" enabled={true} />}
+      {hasAnthropic && <CapabilityChip label="Anthropic" />}
+      {hasChat && <CapabilityChip label="OpenAI Chat" />}
+      {hasResponses && <CapabilityChip label="OpenAI Responses" />}
     </div>
   );
 }
 
-type ProviderTestSummary = {
-  total: number;
-  passed: number;
-  failed: number;
-  testing: number;
-};
-
-function configuredFormatResults(
-  provider: ProviderConfig,
-  testResults: TestResults | undefined,
-): ProviderFormatTestResults[] {
-  if (testResults === undefined) return [];
-  const results: ProviderFormatTestResults[] = [];
-  if (providerHasEndpoint(provider.anthropicBaseUrl)) {
-    results.push(testResults.anthropic);
-  }
-  if (providerHasEndpoint(provider.openaiBaseUrl)) {
-    results.push(testResults.openaiChat);
-  }
-  if (providerHasEndpoint(provider.openaiResponsesBaseUrl)) {
-    results.push(testResults.openaiResponses);
-  }
-  return results;
-}
-
-function summarizeTestResults(
-  provider: ProviderConfig,
-  testResults: TestResults | undefined,
-): ProviderTestSummary {
-  const summary: ProviderTestSummary = { total: 0, passed: 0, failed: 0, testing: 0 };
-  for (const results of configuredFormatResults(provider, testResults)) {
-    for (const state of [results.nonStreaming, results.streaming]) {
-      if (isNotConfiguredState(state)) continue;
-      summary.total += 1;
-      if (hasSuccessField(state)) {
-        if (state.success) {
-          summary.passed += 1;
-        } else {
-          summary.failed += 1;
-        }
-      } else {
-        summary.testing += 1;
-      }
-    }
-  }
-  return summary;
-}
-
-function ProviderTestPill({
-  provider,
-  testResults,
-  isTesting,
-}: {
-  provider: ProviderConfig;
-  testResults: TestResults | undefined;
-  isTesting: boolean;
-}): JSX.Element {
-  const targets = providerTestTargets(provider);
-  const summary = summarizeTestResults(provider, testResults);
-
-  if (isTesting) {
-    return (
-      <span className="inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100">
-        <RotateCw className="size-3 animate-spin" />
-        Testing
-      </span>
-    );
-  }
-
-  if (targets.length === 0) {
-    return (
-      <span className="rounded border border-border/70 bg-muted/20 px-2 py-1 text-xs text-muted-foreground">
-        No endpoint
-      </span>
-    );
-  }
-
-  if (testResults === undefined || summary.total === 0) {
-    return (
-      <span className="rounded border border-border/70 bg-muted/20 px-2 py-1 text-xs text-muted-foreground">
-        Not tested
-      </span>
-    );
-  }
-
-  if (summary.failed > 0) {
-    return (
-      <span className="inline-flex items-center gap-1 rounded border border-red-400/25 bg-red-500/[0.08] px-2 py-1 text-xs text-red-200">
-        <AlertCircle className="size-3" />
-        {summary.passed}/{summary.total} passed
-      </span>
-    );
-  }
-
-  if (summary.testing > 0 || summary.passed < summary.total) {
-    return (
-      <span className="rounded border border-amber-300/25 bg-amber-400/[0.08] px-2 py-1 text-xs text-amber-100">
-        Partial {summary.passed}/{summary.total}
-      </span>
-    );
-  }
-
-  return (
-    <span className="inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100">
-      <CheckCircle className="size-3" />
-      OK {summary.passed}/{summary.total}
-    </span>
-  );
-}
-
 function compactModelLabel(provider: ProviderConfig): string {
   const models = provider.models ?? [];
   if (models.length === 0) return "No models configured";
@@ -447,139 +124,6 @@ function ModelChip({ provider, model }: { provider: ProviderConfig; model: strin
   );
 }
 
-function getErrorIcon(type: ErrorType): JSX.Element {
-  const iconProps = { className: "size-3", strokeWidth: 2 };
-  switch (type) {
-    case "timeout":
-      return <Clock {...iconProps} />;
-    case "network_unreachable":
-      return <WifiOff {...iconProps} />;
-    case "connection_refused":
-      return <Wifi {...iconProps} />;
-    case "auth_failed":
-      return <Lock {...iconProps} />;
-    case "rate_limited":
-      return <Gauge {...iconProps} />;
-    case "server_error":
-      return <Server {...iconProps} />;
-    case "invalid_response":
-      return <HelpCircle {...iconProps} />;
-    case "unknown":
-      return <AlertCircle {...iconProps} />;
-    default:
-      return <AlertCircle {...iconProps} />;
-  }
-}
-
-function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
-  const [showDetails, setShowDetails] = useState(false);
-
-  if (!hasSuccessField(result)) {
-    // Not TestResult - check if NotConfigured or Testing
-    if (isNotConfiguredState(result)) {
-      return (
-        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
-          <Minus className="size-3" />
-          <span>Not configured</span>
-        </div>
-      );
-    }
-    // Must be Testing state
-    return (
-      <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
-        <RotateCw className="size-3 animate-spin" />
-        <span>Testing...</span>
-      </div>
-    );
-  }
-  if (result.success) {
-    const tokenParts: ReactNode[] = [];
-    const timingParts: ReactNode[] = [];
-    if (result.inputTokens !== undefined) {
-      tokenParts.push(<span key="in">{result.inputTokens} in</span>);
-    }
-    if (result.outputTokens !== undefined) {
-      tokenParts.push(<span key="out">{result.outputTokens} out</span>);
-    }
-    if (result.cacheCreationInputTokens !== undefined && result.cacheCreationInputTokens > 0) {
-      tokenParts.push(
-        <span key="cache-create" className="font-mono tabular-nums text-emerald-400">
-          KV Cache +{result.cacheCreationInputTokens}
-        </span>,
-      );
-    }
-    if (result.cacheReadInputTokens !== undefined && result.cacheReadInputTokens > 0) {
-      tokenParts.push(
-        <span key="cache-read" className="font-mono tabular-nums text-purple-400">
-          KV Cache ~{result.cacheReadInputTokens}
-        </span>,
-      );
-    }
-    if (result.firstChunkMs !== undefined && result.firstChunkMs !== null) {
-      timingParts.push(<span key="first">first {formatElapsed(result.firstChunkMs)}</span>);
-    }
-    if (result.totalStreamMs !== undefined && result.totalStreamMs !== null) {
-      timingParts.push(<span key="total">total {formatElapsed(result.totalStreamMs)}</span>);
-    }
-    if (
-      result.tokensPerSecond !== undefined &&
-      result.tokensPerSecond !== null &&
-      result.tokensPerSecond > 0
-    ) {
-      timingParts.push(<span key="rate">{formatTokenRate(result.tokensPerSecond)} tok/s</span>);
-    }
-    const displayTokens: ReactNode[] = [];
-    for (let i = 0; i < tokenParts.length; i++) {
-      if (i > 0) displayTokens.push(", ");
-      displayTokens.push(tokenParts[i]);
-    }
-    const displayTiming: ReactNode[] = [];
-    for (let i = 0; i < timingParts.length; i++) {
-      if (i > 0) displayTiming.push(", ");
-      displayTiming.push(timingParts[i]);
-    }
-    return (
-      <div className="flex shrink-0 items-center gap-1 text-xs text-cyan-100">
-        <CheckCircle className="size-3 text-cyan-300" />
-        <span>Connected</span>
-        {tokenParts.length > 0 && <span className="text-muted-foreground">({displayTokens})</span>}
-        {timingParts.length > 0 && (
-          <span className="hidden text-muted-foreground lg:inline">({displayTiming})</span>
-        )}
-      </div>
-    );
-  }
-
-  const error = result.error;
-  const errorMessage = error?.message ?? "Connection failed";
-  const errorType = error?.type ?? "unknown";
-  const hasDetails = hasDiagnosticDetails(result);
-
-  return (
-    <div className="flex flex-col gap-1 shrink-0">
-      <div className="flex items-center gap-1 text-xs text-red-600 max-w-[200px]">
-        {getErrorIcon(errorType)}
-        <span className="truncate">{errorMessage}</span>
-        {hasDetails && (
-          <button
-            type="button"
-            onClick={() => setShowDetails((value) => !value)}
-            aria-expanded={showDetails}
-            aria-label={
-              showDetails ? "Hide provider test diagnostics" : "Show provider test diagnostics"
-            }
-            className="inline-flex h-5 shrink-0 items-center gap-1 rounded border border-border/70 bg-background/70 px-1.5 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
-          >
-            {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
-            <span>{showDetails ? "Hide" : "Details"}</span>
-          </button>
-        )}
-      </div>
-      {showDetails && hasDetails && <ProviderTestDetails result={result} />}
-    </div>
-  );
-}
-
 function formatTimeAgo(isoString: string): string {
   const now = Date.now();
   const then = new Date(isoString).getTime();
@@ -633,7 +177,6 @@ export function ProviderCard({
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
   const [showDetails, setShowDetails] = useState(false);
-  const [showModelResults, setShowModelResults] = useState(false);
 
   function handleCopy() {
     void copyTextToClipboard(provider.apiKey).then((success) => {
@@ -666,6 +209,7 @@ export function ProviderCard({
 
   return (
     <div
+      data-provider-id={provider.id}
       className={`flex flex-col gap-3 rounded-[8px] border border-border bg-card p-4 shadow-sm transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
     >
       <div className="flex flex-wrap items-start justify-between gap-2">
@@ -771,116 +315,13 @@ export function ProviderCard({
             </div>
           )}
 
-          {(providerHasEndpoint(provider.anthropicBaseUrl) ||
-            providerHasEndpoint(provider.openaiBaseUrl) ||
-            providerHasEndpoint(provider.openaiResponsesBaseUrl)) && (
-            <div className="grid gap-2 lg:grid-cols-3">
-              {providerHasEndpoint(provider.anthropicBaseUrl) && (
-                <ProviderFormatStatusBlock label="Anthropic">
-                  {testResults !== undefined && (
-                    <ProviderFormatTestStatus results={testResults.anthropic} />
-                  )}
-                  {testResults === undefined && (
-                    <div className="text-xs text-muted-foreground">Not tested yet</div>
-                  )}
-                </ProviderFormatStatusBlock>
-              )}
-
-              {providerHasEndpoint(provider.openaiBaseUrl) && (
-                <ProviderFormatStatusBlock label="OpenAI Chat">
-                  {testResults !== undefined && (
-                    <ProviderFormatTestStatus results={testResults.openaiChat} />
-                  )}
-                  {testResults === undefined && (
-                    <div className="text-xs text-muted-foreground">Not tested yet</div>
-                  )}
-                </ProviderFormatStatusBlock>
-              )}
-
-              {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-                <ProviderFormatStatusBlock label="OpenAI Responses">
-                  {testResults !== undefined && (
-                    <ProviderFormatTestStatus results={testResults.openaiResponses} />
-                  )}
-                  {testResults === undefined && (
-                    <div className="text-xs text-muted-foreground">Not tested yet</div>
-                  )}
-                </ProviderFormatStatusBlock>
-              )}
+          <section className="space-y-2">
+            <h4 className="text-xs font-medium text-foreground/80">Connection probes</h4>
+            <ProviderTestMatrix provider={provider} results={testResults} />
+          </section>
 
-              {!providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-                <div className="min-w-0 rounded-md border border-border/50 bg-transparent p-2 text-xs text-muted-foreground/75">
-                  OpenAI Responses not configured
-                </div>
-              )}
-            </div>
-          )}
-
-          {testResults?.models !== undefined && Object.keys(testResults.models).length > 0 && (
-            <div>
-              <button
-                type="button"
-                onClick={() => setShowModelResults((value) => !value)}
-                className="flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
-              >
-                {showModelResults ? (
-                  <ChevronDown className="size-3" />
-                ) : (
-                  <ChevronRight className="size-3" />
-                )}
-                Model Test Results ({Object.keys(testResults.models).length})
-              </button>
-              {showModelResults && (
-                <div className="mt-2 overflow-x-auto">
-                  <table className="w-full border-collapse text-xs">
-                    <thead>
-                      <tr className="border-b border-border">
-                        <th className="px-2 py-1 text-left font-medium text-muted-foreground">
-                          Model
-                        </th>
-                        {providerHasEndpoint(provider.anthropicBaseUrl) && (
-                          <th className="px-2 py-1 text-left font-medium text-muted-foreground">
-                            Anthropic
-                          </th>
-                        )}
-                        {providerHasEndpoint(provider.openaiBaseUrl) && (
-                          <th className="px-2 py-1 text-left font-medium text-muted-foreground">
-                            Chat
-                          </th>
-                        )}
-                        {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-                          <th className="px-2 py-1 text-left font-medium text-muted-foreground">
-                            Responses
-                          </th>
-                        )}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {Object.entries(testResults.models).map(([modelName, modelResult]) => (
-                        <tr key={modelName} className="border-b border-border/50 last:border-0">
-                          <td className="px-2 py-1 font-medium">{modelName}</td>
-                          {providerHasEndpoint(provider.anthropicBaseUrl) && (
-                            <td className="px-2 py-1 align-top">
-                              <ProviderFormatTestStatus results={modelResult.anthropic} />
-                            </td>
-                          )}
-                          {providerHasEndpoint(provider.openaiBaseUrl) && (
-                            <td className="px-2 py-1 align-top">
-                              <ProviderFormatTestStatus results={modelResult.openaiChat} />
-                            </td>
-                          )}
-                          {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-                            <td className="px-2 py-1 align-top">
-                              <ProviderFormatTestStatus results={modelResult.openaiResponses} />
-                            </td>
-                          )}
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
+          {testResults !== undefined && (
+            <ProviderModelTestResultsView provider={provider} testResults={testResults} />
           )}
         </div>
       )}