@tonyclaw/agent-inspector 3.0.23 → 3.0.24

package/src/components/providers/ProviderTestResultsView.tsx

@@ -0,0 +1,732 @@
+import { type JSX, type ReactNode, useState } from "react";
+import {
+  AlertCircle,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Gauge,
+  HelpCircle,
+  Lock,
+  Minus,
+  RotateCw,
+  Server,
+  Wifi,
+  WifiOff,
+} from "lucide-react";
+import type {
+  ProviderFormatTestResults,
+  ProviderModelTestResults,
+  ProviderTestErrorType as ErrorType,
+  ProviderTestResult as TestResult,
+  ProviderTestResults as TestResults,
+  ProviderTestState,
+} from "../../lib/providerTestContract";
+import type { ProviderConfig } from "../../proxy/providers";
+import { cn } from "../../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+
+type ProviderTestResultSet = {
+  anthropic: ProviderFormatTestResults;
+  openaiChat: ProviderFormatTestResults;
+  openaiResponses: ProviderFormatTestResults;
+};
+
+type ProbeTone = "success" | "failure" | "pending" | "quiet";
+
+export type ProviderProbePresentation = {
+  tone: ProbeTone;
+  label: string;
+  metric: string | null;
+  hasDetails: boolean;
+};
+
+export type ProviderTestSummary = {
+  total: number;
+  passed: number;
+  failed: number;
+  testing: number;
+};
+
+function hasSuccessField(result: ProviderTestState): result is TestResult {
+  return Object.prototype.hasOwnProperty.call(result, "success");
+}
+
+function isNotConfiguredState(result: ProviderTestState): result is { notConfigured: true } {
+  return Object.prototype.hasOwnProperty.call(result, "notConfigured");
+}
+
+function providerHasEndpoint(value: string | undefined): value is string {
+  return value !== undefined && value !== "";
+}
+
+function hasText(value: string | undefined): value is string {
+  return value !== undefined && value.trim() !== "";
+}
+
+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 errorLabel(type: ErrorType): string {
+  switch (type) {
+    case "timeout":
+      return "Timeout";
+    case "network_unreachable":
+      return "Offline";
+    case "connection_refused":
+      return "Refused";
+    case "auth_failed":
+      return "Auth";
+    case "rate_limited":
+      return "Rate limit";
+    case "server_error":
+      return "Server";
+    case "invalid_response":
+      return "Invalid";
+    case "unknown":
+      return "Failed";
+  }
+}
+
+function compactSuccessMetric(result: TestResult): string | null {
+  if (result.firstChunkMs !== undefined && result.firstChunkMs !== null) {
+    return formatElapsed(result.firstChunkMs);
+  }
+  if (result.latencyMs !== undefined) return formatElapsed(result.latencyMs);
+  if (result.totalStreamMs !== undefined && result.totalStreamMs !== null) {
+    return formatElapsed(result.totalStreamMs);
+  }
+  if (
+    result.tokensPerSecond !== undefined &&
+    result.tokensPerSecond !== null &&
+    result.tokensPerSecond > 0
+  ) {
+    return formatTokenRate(result.tokensPerSecond);
+  }
+  return null;
+}
+
+export function presentProviderProbe(result: ProviderTestState): ProviderProbePresentation {
+  if (isNotConfiguredState(result)) {
+    return { tone: "quiet", label: "N/A", metric: null, hasDetails: false };
+  }
+  if (!hasSuccessField(result)) {
+    return { tone: "pending", label: "Running", metric: null, hasDetails: false };
+  }
+  if (result.success) {
+    return {
+      tone: "success",
+      label: "Pass",
+      metric: compactSuccessMetric(result),
+      hasDetails: true,
+    };
+  }
+  return {
+    tone: "failure",
+    label: errorLabel(result.error?.type ?? "unknown"),
+    metric: null,
+    hasDetails: true,
+  };
+}
+
+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;
+}
+
+export function summarizeProviderTestResults(
+  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)) {
+        summary.testing += 1;
+      } else if (state.success) {
+        summary.passed += 1;
+      } else {
+        summary.failed += 1;
+      }
+    }
+  }
+  return summary;
+}
+
+function formatHeaders(headers: Record<string, string> | undefined): string | undefined {
+  if (headers === undefined) return undefined;
+  const lines = Object.entries(headers).map(([name, value]) => `${name}: ${value}`);
+  return lines.length === 0 ? undefined : lines.join("\n");
+}
+
+function DiagnosticSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <section className="space-y-1.5">
+      <h4 className="text-xs font-medium text-foreground/80">{title}</h4>
+      {children}
+    </section>
+  );
+}
+
+function DiagnosticPre({ value }: { value: string }): JSX.Element {
+  return (
+    <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-all rounded-md bg-muted/40 p-3 font-mono text-[11px] leading-relaxed text-foreground/80">
+      {value}
+    </pre>
+  );
+}
+
+function ResultMetric({ label, value }: { label: string; value: string }): JSX.Element {
+  return (
+    <div className="min-w-0 rounded-md bg-muted/35 px-3 py-2">
+      <dt className="text-[10px] text-muted-foreground">{label}</dt>
+      <dd className="mt-1 truncate font-mono text-xs font-semibold text-foreground" title={value}>
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function ProviderTestMetrics({ result }: { result: TestResult }): JSX.Element | null {
+  const hasTokens = result.inputTokens !== undefined || result.outputTokens !== undefined;
+  const hasCache =
+    result.cacheCreationInputTokens !== undefined || result.cacheReadInputTokens !== undefined;
+  const hasMetrics =
+    hasText(result.model) ||
+    hasTokens ||
+    hasCache ||
+    result.latencyMs !== undefined ||
+    (result.firstChunkMs !== undefined && result.firstChunkMs !== null) ||
+    (result.totalStreamMs !== undefined && result.totalStreamMs !== null) ||
+    (result.tokensPerSecond !== undefined &&
+      result.tokensPerSecond !== null &&
+      result.tokensPerSecond > 0);
+  if (!hasMetrics) return null;
+
+  return (
+    <dl className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+      {hasText(result.model) && <ResultMetric label="Model" value={result.model} />}
+      {result.latencyMs !== undefined && (
+        <ResultMetric label="Latency" value={formatElapsed(result.latencyMs)} />
+      )}
+      {result.firstChunkMs !== undefined && result.firstChunkMs !== null && (
+        <ResultMetric label="First chunk" value={formatElapsed(result.firstChunkMs)} />
+      )}
+      {result.totalStreamMs !== undefined && result.totalStreamMs !== null && (
+        <ResultMetric label="Stream total" value={formatElapsed(result.totalStreamMs)} />
+      )}
+      {result.tokensPerSecond !== undefined &&
+        result.tokensPerSecond !== null &&
+        result.tokensPerSecond > 0 && (
+          <ResultMetric
+            label="Token rate"
+            value={`${formatTokenRate(result.tokensPerSecond)} tok`}
+          />
+        )}
+      {hasTokens && (
+        <ResultMetric
+          label="Tokens in / out"
+          value={`${String(result.inputTokens ?? 0)} / ${String(result.outputTokens ?? 0)}`}
+        />
+      )}
+      {hasCache && (
+        <ResultMetric
+          label="Cache create / read"
+          value={`${String(result.cacheCreationInputTokens ?? 0)} / ${String(result.cacheReadInputTokens ?? 0)}`}
+        />
+      )}
+    </dl>
+  );
+}
+
+function ProviderTestDiagnostics({ result }: { result: TestResult }): JSX.Element | null {
+  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
+      ? undefined
+      : `${String(debug.responseStatus)}${
+          hasText(debug.responseStatusText) ? ` ${debug.responseStatusText}` : ""
+        }`;
+  const responseBody = debug?.responseBody ?? result.rawResponse;
+  const hasDiagnostics =
+    hasText(result.error?.hint) ||
+    hasText(result.error?.details) ||
+    hasText(requestUrl) ||
+    requestHeaders !== undefined ||
+    hasText(debug?.requestBody) ||
+    hasText(responseStatus) ||
+    responseHeaders !== undefined ||
+    hasText(responseBody);
+  if (!hasDiagnostics) return null;
+
+  return (
+    <div className="space-y-4 border-t border-border/70 pt-4 text-xs text-muted-foreground">
+      {hasText(result.error?.hint) && (
+        <DiagnosticSection title="Hint">
+          <p className="break-words text-foreground/80">{result.error.hint}</p>
+        </DiagnosticSection>
+      )}
+      {hasText(result.error?.details) && (
+        <DiagnosticSection title="Error details">
+          <DiagnosticPre value={result.error.details} />
+        </DiagnosticSection>
+      )}
+      {hasText(requestUrl) && (
+        <DiagnosticSection title="Request">
+          <DiagnosticPre value={`${requestMethod} ${requestUrl}`} />
+        </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">
+          <DiagnosticPre value={responseStatus} />
+        </DiagnosticSection>
+      )}
+      {responseHeaders !== undefined && (
+        <DiagnosticSection title="Response headers">
+          <DiagnosticPre value={responseHeaders} />
+        </DiagnosticSection>
+      )}
+      {hasText(responseBody) && (
+        <DiagnosticSection title="Response body">
+          <DiagnosticPre value={responseBody} />
+        </DiagnosticSection>
+      )}
+    </div>
+  );
+}
+
+function ProviderTestResultDialog({
+  result,
+  probeLabel,
+  children,
+}: {
+  result: TestResult;
+  probeLabel: string;
+  children: ReactNode;
+}): JSX.Element {
+  const errorMessage = result.error?.message ?? "Connection failed";
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[82vh] max-w-2xl gap-0 overflow-hidden p-0">
+        <DialogHeader className="border-b border-border/70 px-5 py-4 pr-12">
+          <div className="flex items-center gap-2">
+            {result.success ? (
+              <CheckCircle className="size-4 text-cyan-300" />
+            ) : (
+              <AlertCircle className="size-4 text-red-300" />
+            )}
+            <DialogTitle className="text-base">{probeLabel}</DialogTitle>
+          </div>
+          <DialogDescription>
+            {result.success ? "Connection probe passed." : errorMessage}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 overflow-y-auto p-5">
+          {!result.success && (
+            <div className="rounded-md border border-red-400/20 bg-red-400/[0.06] px-3 py-2 text-sm text-red-200">
+              <div className="font-medium">{errorLabel(result.error?.type ?? "unknown")}</div>
+              <div className="mt-1 break-words text-xs text-muted-foreground">{errorMessage}</div>
+            </div>
+          )}
+          <ProviderTestMetrics result={result} />
+          <ProviderTestDiagnostics result={result} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function errorIcon(type: ErrorType): JSX.Element {
+  const className = "size-3 shrink-0";
+  switch (type) {
+    case "timeout":
+      return <Clock className={className} />;
+    case "network_unreachable":
+      return <WifiOff className={className} />;
+    case "connection_refused":
+      return <Wifi className={className} />;
+    case "auth_failed":
+      return <Lock className={className} />;
+    case "rate_limited":
+      return <Gauge className={className} />;
+    case "server_error":
+      return <Server className={className} />;
+    case "invalid_response":
+      return <HelpCircle className={className} />;
+    case "unknown":
+      return <AlertCircle className={className} />;
+  }
+}
+
+const PROBE_TONE_CLASSES: Record<ProbeTone, string> = {
+  success: "bg-cyan-300/[0.07] text-cyan-100 hover:bg-cyan-300/[0.11]",
+  failure: "bg-red-400/[0.07] text-red-200 hover:bg-red-400/[0.11]",
+  pending: "bg-muted/40 text-foreground/80",
+  quiet: "bg-transparent text-muted-foreground/70",
+};
+
+function ProviderProbeStatus({
+  result,
+  probeLabel,
+}: {
+  result: ProviderTestState;
+  probeLabel: string;
+}): JSX.Element {
+  const presentation = presentProviderProbe(result);
+  const icon = isNotConfiguredState(result) ? (
+    <Minus className="size-3 shrink-0" />
+  ) : !hasSuccessField(result) ? (
+    <RotateCw className="size-3 shrink-0 animate-spin" />
+  ) : result.success ? (
+    <CheckCircle className="size-3 shrink-0" />
+  ) : (
+    errorIcon(result.error?.type ?? "unknown")
+  );
+  const content = (
+    <>
+      {icon}
+      <span className="min-w-0 truncate">{presentation.label}</span>
+      {presentation.metric !== null && (
+        <span className="ml-auto shrink-0 font-mono text-[10px] opacity-75">
+          {presentation.metric}
+        </span>
+      )}
+    </>
+  );
+  const className = cn(
+    "inline-flex h-7 w-full min-w-0 items-center gap-1.5 rounded-md px-2 text-left text-xs transition-colors",
+    PROBE_TONE_CLASSES[presentation.tone],
+  );
+
+  if (hasSuccessField(result) && presentation.hasDetails) {
+    return (
+      <ProviderTestResultDialog result={result} probeLabel={probeLabel}>
+        <button
+          type="button"
+          className={className}
+          aria-label={`Open ${probeLabel} result: ${presentation.label}`}
+        >
+          {content}
+        </button>
+      </ProviderTestResultDialog>
+    );
+  }
+
+  return <div className={className}>{content}</div>;
+}
+
+function ProbePlaceholder({ label }: { label: string }): JSX.Element {
+  return (
+    <div className="inline-flex h-7 w-full min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground/70">
+      <Minus className="size-3 shrink-0" />
+      <span className="truncate">{label}</span>
+    </div>
+  );
+}
+
+function ProviderFormatRow({
+  label,
+  results,
+  configured = true,
+}: {
+  label: string;
+  results?: ProviderFormatTestResults;
+  configured?: boolean;
+}): JSX.Element {
+  return (
+    <div className="grid min-w-0 grid-cols-[minmax(6.5rem,1fr)_minmax(6rem,0.9fr)_minmax(6rem,0.9fr)] items-center gap-2 border-t border-border/60 px-2 py-2">
+      <div className="min-w-0 truncate text-xs font-medium text-foreground/85" title={label}>
+        {label}
+      </div>
+      {configured && results !== undefined ? (
+        <ProviderProbeStatus result={results.nonStreaming} probeLabel={`${label} non-stream`} />
+      ) : (
+        <ProbePlaceholder label={configured ? "Not tested" : "Off"} />
+      )}
+      {configured && results !== undefined ? (
+        <ProviderProbeStatus result={results.streaming} probeLabel={`${label} stream`} />
+      ) : (
+        <ProbePlaceholder label={configured ? "Not tested" : "Off"} />
+      )}
+    </div>
+  );
+}
+
+export function ProviderTestMatrix({
+  provider,
+  results,
+}: {
+  provider: ProviderConfig;
+  results?: ProviderTestResultSet;
+}): JSX.Element {
+  const hasAnthropic = providerHasEndpoint(provider.anthropicBaseUrl);
+  const hasChat = providerHasEndpoint(provider.openaiBaseUrl);
+  const hasResponses = providerHasEndpoint(provider.openaiResponsesBaseUrl);
+  if (!hasAnthropic && !hasChat && !hasResponses) {
+    return <div className="text-xs text-muted-foreground">No testable endpoint configured.</div>;
+  }
+
+  return (
+    <div className="min-w-0 overflow-x-auto rounded-md border border-border/70">
+      <div className="min-w-[20rem]">
+        <div className="grid grid-cols-[minmax(6.5rem,1fr)_minmax(6rem,0.9fr)_minmax(6rem,0.9fr)] gap-2 bg-muted/25 px-2 py-1.5 text-[10px] text-muted-foreground">
+          <span>Protocol</span>
+          <span>Non-stream</span>
+          <span>Stream</span>
+        </div>
+        {hasAnthropic && <ProviderFormatRow label="Anthropic" results={results?.anthropic} />}
+        {hasChat && <ProviderFormatRow label="OpenAI Chat" results={results?.openaiChat} />}
+        <ProviderFormatRow
+          label="OpenAI Responses"
+          results={results?.openaiResponses}
+          configured={hasResponses}
+        />
+      </div>
+    </div>
+  );
+}
+
+function summarizeFormat(results: ProviderFormatTestResults): ProviderTestSummary {
+  const summary: ProviderTestSummary = { total: 0, passed: 0, failed: 0, testing: 0 };
+  for (const state of [results.nonStreaming, results.streaming]) {
+    if (isNotConfiguredState(state)) continue;
+    summary.total += 1;
+    if (!hasSuccessField(state)) summary.testing += 1;
+    else if (state.success) summary.passed += 1;
+    else summary.failed += 1;
+  }
+  return summary;
+}
+
+function FormatSummaryBadge({
+  label,
+  results,
+}: {
+  label: string;
+  results: ProviderFormatTestResults;
+}): JSX.Element {
+  const summary = summarizeFormat(results);
+  const className =
+    summary.failed > 0
+      ? "border-red-400/20 bg-red-400/[0.06] text-red-200"
+      : summary.testing > 0
+        ? "border-amber-300/20 bg-amber-300/[0.06] text-amber-100"
+        : summary.total > 0 && summary.passed === summary.total
+          ? "border-cyan-300/20 bg-cyan-300/[0.06] text-cyan-100"
+          : "border-border/60 bg-transparent text-muted-foreground";
+  const value =
+    summary.failed > 0
+      ? `${summary.failed} fail`
+      : summary.testing > 0
+        ? "running"
+        : summary.total === 0
+          ? "off"
+          : `${summary.passed}/${summary.total}`;
+  return (
+    <span className={cn("rounded border px-1.5 py-0.5 text-[10px]", className)}>
+      {label} {value}
+    </span>
+  );
+}
+
+function ModelResultRow({
+  provider,
+  modelName,
+  results,
+  expanded,
+  onToggle,
+}: {
+  provider: ProviderConfig;
+  modelName: string;
+  results: ProviderModelTestResults;
+  expanded: boolean;
+  onToggle: () => void;
+}): JSX.Element {
+  return (
+    <div className="min-w-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full min-w-0 flex-wrap items-center gap-2 px-2 py-2 text-left transition-colors hover:bg-muted/20"
+        aria-expanded={expanded}
+      >
+        {expanded ? (
+          <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+        )}
+        <span className="min-w-[8rem] flex-1 truncate text-xs font-medium" title={modelName}>
+          {modelName}
+        </span>
+        <span className="flex flex-wrap items-center justify-end gap-1">
+          {providerHasEndpoint(provider.anthropicBaseUrl) && (
+            <FormatSummaryBadge label="A" results={results.anthropic} />
+          )}
+          {providerHasEndpoint(provider.openaiBaseUrl) && (
+            <FormatSummaryBadge label="Chat" results={results.openaiChat} />
+          )}
+          {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
+            <FormatSummaryBadge label="Resp" results={results.openaiResponses} />
+          )}
+        </span>
+      </button>
+      {expanded && (
+        <div className="px-2 pb-3">
+          <ProviderTestMatrix provider={provider} results={results} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ProviderModelTestResultsView({
+  provider,
+  testResults,
+}: {
+  provider: ProviderConfig;
+  testResults: TestResults;
+}): JSX.Element | null {
+  const entries = Object.entries(testResults.models ?? {});
+  const [showModels, setShowModels] = useState(false);
+  const [expandedModelName, setExpandedModelName] = useState<string | null>(null);
+  if (entries.length === 0) return null;
+
+  return (
+    <section className="space-y-2">
+      <button
+        type="button"
+        onClick={() => setShowModels((value) => !value)}
+        className="flex w-full items-center gap-1.5 text-left text-xs font-medium text-foreground/80 transition-colors hover:text-foreground"
+        aria-expanded={showModels}
+      >
+        {showModels ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
+        Model probes
+        <span className="rounded bg-muted/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+          {entries.length}
+        </span>
+      </button>
+      {showModels && (
+        <div className="min-w-0 divide-y divide-border/60 rounded-md border border-border/70">
+          {entries.map(([modelName, modelResults]) => (
+            <ModelResultRow
+              key={modelName}
+              provider={provider}
+              modelName={modelName}
+              results={modelResults}
+              expanded={expandedModelName === modelName}
+              onToggle={() =>
+                setExpandedModelName((current) => (current === modelName ? null : modelName))
+              }
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function ProviderTestPill({
+  provider,
+  testResults,
+  isTesting,
+}: {
+  provider: ProviderConfig;
+  testResults: TestResults | undefined;
+  isTesting: boolean;
+}): JSX.Element {
+  const hasEndpoint =
+    providerHasEndpoint(provider.anthropicBaseUrl) ||
+    providerHasEndpoint(provider.openaiBaseUrl) ||
+    providerHasEndpoint(provider.openaiResponsesBaseUrl);
+  const summary = summarizeProviderTestResults(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 (!hasEndpoint) {
+    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.failed} failed
+      </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">
+        {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" />
+      {summary.passed}/{summary.total}
+    </span>
+  );
+}