@tonyclaw/agent-inspector 3.0.4 → 3.0.6

package/src/components/providers/ProviderCard.tsx

@@ -319,6 +319,165 @@ function ProviderTestCoverage({ provider }: { provider: ProviderConfig }): JSX.E
   );
 }
 
+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";
+  const visible = models.slice(0, 2).join(", ");
+  const hiddenCount = models.length - 2;
+  return hiddenCount > 0 ? `${visible} +${hiddenCount} more` : visible;
+}
+
+function ModelChip({ provider, model }: { provider: ProviderConfig; model: string }): JSX.Element {
+  const metadata = findProviderModelMetadata(provider, model);
+  const sourceLink = getModelSourceLink(metadata?.sourceUrl);
+  return (
+    <span className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+      <span>{model}</span>
+      {metadata !== null && metadata.contextWindow !== undefined && (
+        <span className="font-mono text-foreground/80">
+          {formatContextWindowTokens(metadata.contextWindow)}
+        </span>
+      )}
+      {sourceLink !== null && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <a
+                href={sourceLink.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-0.5 rounded border border-border/70 bg-background/70 px-1 font-mono text-[10px] leading-4 text-muted-foreground transition-colors hover:text-foreground"
+                aria-label={sourceLink.title}
+              >
+                {sourceLink.label}
+              </a>
+            </TooltipTrigger>
+            <TooltipContent>{sourceLink.title}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </span>
+  );
+}
+
+function modelResultsLabel(testResults: TestResults | undefined): string | null {
+  const models = testResults?.models;
+  if (models === undefined) return null;
+  const count = Object.keys(models).length;
+  if (count === 0) return null;
+  return `${count} model${count === 1 ? "" : "s"} tested`;
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -520,6 +679,7 @@ export function ProviderCard({
 }: ProviderCardProps): JSX.Element {
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
   const [showModelResults, setShowModelResults] = useState(false);
 
   function handleCopy() {
@@ -530,7 +690,6 @@ export function ProviderCard({
     });
   }
 
-  // Get docs URL: use provider.apiDocsUrl if configured, otherwise check KNOWN_PROVIDER_DOCS
   const docsUrl =
     provider.apiDocsUrl ??
     Object.entries(KNOWN_PROVIDER_DOCS).find(([keyword]) =>
@@ -540,6 +699,8 @@ export function ProviderCard({
   const canRefreshMetadata =
     provider.modelMetadataUrl !== undefined && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
+  const isTestingValue = isTesting ?? false;
+  const testedModelsLabel = modelResultsLabel(testResults);
   const providerSourceBadge =
     provider.source === "company" ? (
       <TooltipProvider>
@@ -567,90 +728,53 @@ export function ProviderCard({
 
   return (
     <div
-      className={`border border-border bg-card shadow-sm flex flex-col gap-3 rounded-[8px] p-4 transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
+      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 items-start justify-between gap-2">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="font-medium truncate">{provider.name}</span>
-          {providerSourceBadge}
-          {providerSourceBadge === null && provider.source === "company" && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
-                    公司
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>Company-provided API key</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
-          {providerSourceBadge === null && provider.source === "personal" && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0">
-                    个人
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>Your personal API key</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+        <div className="min-w-0 space-y-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="truncate font-medium">{provider.name}</span>
+            {providerSourceBadge}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {compactModelLabel(provider)}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <ProviderTestPill
+            provider={provider}
+            testResults={testResults}
+            isTesting={isTestingValue}
+          />
+          {docsUrl !== undefined && (
+            <a
+              href={docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
+              title="View API documentation"
+            >
+              <ExternalLink className="size-3" />
+              <span className="sr-only">Docs</span>
+            </a>
           )}
         </div>
-        {docsUrl !== undefined && (
-          <a
-            href={docsUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs"
-            title="View API documentation"
-          >
-            <ExternalLink className="size-3" />
-            <span className="sr-only">Docs</span>
-          </a>
-        )}
       </div>
 
-      {provider.models !== undefined && provider.models.length > 0 && (
-        <div className="flex flex-wrap gap-1">
-          {provider.models.map((m) => {
-            const metadata = findProviderModelMetadata(provider, m);
-            const sourceLink = getModelSourceLink(metadata?.sourceUrl);
-            return (
-              <span
-                key={m}
-                className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground"
-              >
-                <span>{m}</span>
-                {metadata !== null && metadata.contextWindow !== undefined && (
-                  <span className="font-mono text-foreground/80">
-                    {formatContextWindowTokens(metadata.contextWindow)}
-                  </span>
-                )}
-                {sourceLink !== null && (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <a
-                          href={sourceLink.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline-flex items-center gap-0.5 rounded border border-border/70 bg-background/70 px-1 font-mono text-[10px] leading-4 text-muted-foreground transition-colors hover:text-foreground"
-                          aria-label={sourceLink.title}
-                        >
-                          {sourceLink.label}
-                        </a>
-                      </TooltipTrigger>
-                      <TooltipContent>{sourceLink.title}</TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
-              </span>
-            );
-          })}
+      <div className="flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+        <ProviderTestCoverage provider={provider} />
+        <div className="flex flex-wrap items-center gap-2">
+          <span>Key configured</span>
+          <span>{provider.authHeader === "x-api-key" ? "x-api-key" : "Bearer"}</span>
+          {testedModelsLabel !== null && <span>{testedModelsLabel}</span>}
+          {testResults?.testedAt !== undefined && (
+            <span className="inline-flex items-center gap-1">
+              <Clock className="size-3" />
+              {formatTimeAgo(testResults.testedAt)}
+            </span>
+          )}
         </div>
-      )}
+      </div>
 
       {!hasContextMetadata && (
         <div className="flex items-center justify-between gap-2 rounded-md border border-amber-500/25 bg-amber-500/6 px-2 py-1.5 text-xs text-muted-foreground">
@@ -682,144 +806,156 @@ export function ProviderCard({
         </div>
       )}
 
-      <div className="flex items-center gap-2">
-        <code className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded flex-1 truncate">
-          {showApiKey ? provider.apiKey : maskApiKey(provider.apiKey)}
-        </code>
-        <button
-          type="button"
-          onClick={() => setShowApiKey((s) => !s)}
-          className="text-muted-foreground hover:text-foreground transition-colors p-1"
-          aria-label={showApiKey ? "Hide API key" : "Show API key"}
-        >
-          {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-        </button>
-        <button
-          type="button"
-          onClick={handleCopy}
-          className="text-muted-foreground hover:text-foreground transition-colors p-1"
-          aria-label="Copy API key"
-        >
-          {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
-        </button>
-      </div>
+      {showDetails && (
+        <div className="space-y-3 border-t border-border/60 pt-3">
+          <div className="flex items-center gap-2">
+            <code className="flex-1 truncate rounded bg-muted px-2 py-1 text-xs text-muted-foreground">
+              {showApiKey ? provider.apiKey : maskApiKey(provider.apiKey)}
+            </code>
+            <button
+              type="button"
+              onClick={() => setShowApiKey((s) => !s)}
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={showApiKey ? "Hide API key" : "Show API key"}
+            >
+              {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </button>
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label="Copy API key"
+            >
+              {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
+            </button>
+          </div>
 
-      {providerHasEndpoint(provider.anthropicBaseUrl) && (
-        <ProviderEndpointSummary
-          label="Test: Anthropic"
-          baseUrl={provider.anthropicBaseUrl}
-          endpoint={PATH_V1_MESSAGES}
-          providerName={provider.name}
-        >
-          {testResults !== undefined && (
-            <ProviderFormatTestStatus results={testResults.anthropic} />
+          {provider.models !== undefined && provider.models.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {provider.models.map((model) => (
+                <ModelChip key={model} provider={provider} model={model} />
+              ))}
+            </div>
           )}
-        </ProviderEndpointSummary>
-      )}
 
-      {providerHasEndpoint(provider.openaiBaseUrl) && (
-        <ProviderEndpointSummary
-          label="Test: Chat"
-          baseUrl={provider.openaiBaseUrl}
-          endpoint={PATH_V1_CHAT_COMPLETIONS}
-          providerName={provider.name}
-        >
-          {testResults !== undefined && (
-            <ProviderFormatTestStatus results={testResults.openaiChat} />
+          {providerHasEndpoint(provider.anthropicBaseUrl) && (
+            <ProviderEndpointSummary
+              label="Anthropic"
+              baseUrl={provider.anthropicBaseUrl}
+              endpoint={PATH_V1_MESSAGES}
+              providerName={provider.name}
+            >
+              {testResults !== undefined && (
+                <ProviderFormatTestStatus results={testResults.anthropic} />
+              )}
+            </ProviderEndpointSummary>
           )}
-        </ProviderEndpointSummary>
-      )}
 
-      {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-        <ProviderEndpointSummary
-          label="Test: Responses"
-          baseUrl={provider.openaiResponsesBaseUrl}
-          endpoint={PATH_V1_RESPONSES}
-          providerName={provider.name}
-        >
-          {testResults !== undefined && (
-            <ProviderFormatTestStatus results={testResults.openaiResponses} />
+          {providerHasEndpoint(provider.openaiBaseUrl) && (
+            <ProviderEndpointSummary
+              label="Chat"
+              baseUrl={provider.openaiBaseUrl}
+              endpoint={PATH_V1_CHAT_COMPLETIONS}
+              providerName={provider.name}
+            >
+              {testResults !== undefined && (
+                <ProviderFormatTestStatus results={testResults.openaiChat} />
+              )}
+            </ProviderEndpointSummary>
           )}
-        </ProviderEndpointSummary>
-      )}
 
-      {testResults?.testedAt !== undefined && (
-        <div className="text-xs text-muted-foreground flex items-center gap-1">
-          <Clock className="size-3" />
-          <span>Tested {formatTimeAgo(testResults.testedAt)}</span>
-        </div>
-      )}
-      {testResults?.models !== undefined && Object.keys(testResults.models).length > 0 && (
-        <div className="border-t pt-2">
-          <button
-            type="button"
-            onClick={() => setShowModelResults((value) => !value)}
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-          >
-            {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 text-xs border-collapse">
-                <thead>
-                  <tr className="border-b border-border">
-                    <th className="text-left py-1 px-2 font-medium text-muted-foreground">Model</th>
-                    {provider.anthropicBaseUrl !== undefined &&
-                      provider.anthropicBaseUrl !== "" && (
-                        <th className="text-left py-1 px-2 font-medium text-muted-foreground">
-                          Anthropic
-                        </th>
-                      )}
-                    {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-                      <th className="text-left py-1 px-2 font-medium text-muted-foreground">
-                        Chat
-                      </th>
-                    )}
-                    {provider.openaiResponsesBaseUrl !== undefined &&
-                      provider.openaiResponsesBaseUrl !== "" && (
-                        <th className="text-left py-1 px-2 font-medium text-muted-foreground">
-                          Responses
+          {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
+            <ProviderEndpointSummary
+              label="Responses"
+              baseUrl={provider.openaiResponsesBaseUrl}
+              endpoint={PATH_V1_RESPONSES}
+              providerName={provider.name}
+            >
+              {testResults !== undefined && (
+                <ProviderFormatTestStatus results={testResults.openaiResponses} />
+              )}
+            </ProviderEndpointSummary>
+          )}
+
+          {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>
-                      )}
-                  </tr>
-                </thead>
-                <tbody>
-                  {Object.entries(testResults.models).map(([modelName, modelResult]) => (
-                    <tr key={modelName} className="border-b border-border/50 last:border-0">
-                      <td className="py-1 px-2 font-medium">{modelName}</td>
-                      {provider.anthropicBaseUrl !== undefined &&
-                        provider.anthropicBaseUrl !== "" && (
-                          <td className="py-1 px-2 align-top">
-                            <ProviderFormatTestStatus results={modelResult.anthropic} />
-                          </td>
+                        {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>
                         )}
-                      {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-                        <td className="py-1 px-2 align-top">
-                          <ProviderFormatTestStatus results={modelResult.openaiChat} />
-                        </td>
-                      )}
-                      {provider.openaiResponsesBaseUrl !== undefined &&
-                        provider.openaiResponsesBaseUrl !== "" && (
-                          <td className="py-1 px-2 align-top">
-                            <ProviderFormatTestStatus results={modelResult.openaiResponses} />
-                          </td>
+                        {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
+                          <th className="px-2 py-1 text-left font-medium text-muted-foreground">
+                            Responses
+                          </th>
                         )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                      </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>
           )}
         </div>
       )}
 
-      <div className="flex flex-col gap-2 pt-1 border-t sm:flex-row sm:items-center sm:justify-between">
-        <ProviderTestCoverage provider={provider} />
+      <div className="flex flex-col gap-2 border-t pt-1 sm:flex-row sm:items-center sm:justify-between">
+        <button
+          type="button"
+          onClick={() => setShowDetails((value) => !value)}
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          aria-expanded={showDetails}
+        >
+          {showDetails ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+          Details
+        </button>
         <div className="flex gap-2">
           {onTest !== undefined && (
             <Button
@@ -827,10 +963,10 @@ export function ProviderCard({
               size="sm"
               onClick={() => onTest(provider.id)}
               className="text-xs h-7 gap-1"
-              disabled={isTesting ?? false}
+              disabled={isTestingValue}
             >
-              <RotateCw className={`size-3 ${(isTesting ?? false) ? "animate-spin" : ""}`} />
-              {(isTesting ?? false)
+              <RotateCw className={`size-3 ${isTestingValue ? "animate-spin" : ""}`} />
+              {isTestingValue
                 ? testingTimeLeft !== undefined
                   ? `Testing (${testingTimeLeft}s)`
                   : "Testing..."
@@ -842,7 +978,7 @@ export function ProviderCard({
             size="sm"
             onClick={() => onEdit(provider)}
             className="text-xs h-7 gap-1"
-            disabled={isTesting ?? false}
+            disabled={isTestingValue}
           >
             <Pencil className="size-3" />
             Edit
@@ -852,7 +988,7 @@ export function ProviderCard({
             size="sm"
             onClick={() => onDelete(provider.id)}
             className="text-xs h-7 gap-1 text-destructive hover:text-destructive"
-            disabled={isTesting ?? false}
+            disabled={isTestingValue}
           >
             <Trash2 className="size-3" />
             Delete