@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/providers/ProviderTestResultsView.tsx

@@ -1,734 +0,0 @@
-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 "../../lib/providerContract";
-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 hasNumber(value: number | null | undefined): value is number {
-  return value !== undefined && value !== null;
-}
-
-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 = hasNumber(result.inputTokens) || hasNumber(result.outputTokens);
-  const hasCache =
-    hasNumber(result.cacheCreationInputTokens) || hasNumber(result.cacheReadInputTokens);
-  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-status-success" />
-            ) : (
-              <AlertCircle className="size-4 text-status-danger" />
-            )}
-            <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-status-danger/30 bg-status-danger/10 px-3 py-2 text-sm text-status-danger">
-              <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-status-success/10 text-status-success hover:bg-status-success/15",
-  failure: "bg-status-danger/10 text-status-danger hover:bg-status-danger/15",
-  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} />}
-        {hasResponses && (
-          <ProviderFormatRow label="OpenAI Responses" results={results?.openaiResponses} />
-        )}
-      </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-status-danger/30 bg-status-danger/10 text-status-danger"
-      : summary.testing > 0
-        ? "border-status-watch/30 bg-status-watch/10 text-status-watch"
-        : summary.total > 0 && summary.passed === summary.total
-          ? "border-status-success/30 bg-status-success/10 text-status-success"
-          : "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-status-cool/30 bg-status-cool/10 px-2 py-1 text-xs text-status-cool">
-        <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-status-danger/30 bg-status-danger/10 px-2 py-1 text-xs text-status-danger">
-        <AlertCircle className="size-3" />
-        {summary.failed} failed
-      </span>
-    );
-  }
-  if (summary.testing > 0 || summary.passed < summary.total) {
-    return (
-      <span className="rounded border border-status-watch/30 bg-status-watch/10 px-2 py-1 text-xs text-status-watch">
-        {summary.passed}/{summary.total}
-      </span>
-    );
-  }
-  return (
-    <span className="inline-flex items-center gap-1 rounded border border-status-success/30 bg-status-success/10 px-2 py-1 text-xs text-status-success">
-      <CheckCircle className="size-3" />
-      {summary.passed}/{summary.total}
-    </span>
-  );
-}