@tonyclaw/agent-inspector 3.0.9 → 3.0.11

package/src/components/providers/ProviderCard.tsx

@@ -31,13 +31,6 @@ import {
   providerHasContextMetadata,
 } from "../../lib/providerModelMetadata";
 import { formatContextWindowTokens } from "../../lib/utils";
-import {
-  PATH_V1_CHAT_COMPLETIONS,
-  PATH_V1_MESSAGES,
-  PATH_V1_RESPONSES,
-  previewUpstreamUrl,
-  type UpstreamUrlDiagnostic,
-} from "../../lib/upstreamUrl";
 import type {
   ProviderFormatTestResults,
   ProviderTestErrorType as ErrorType,
@@ -225,51 +218,16 @@ function ProviderFormatTestStatus({
   );
 }
 
-function EndpointDiagnosticLine({
-  diagnostic,
-}: {
-  diagnostic: UpstreamUrlDiagnostic;
-}): JSX.Element {
-  return (
-    <div className={diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground"}>
-      {diagnostic.message}
-    </div>
-  );
-}
-
-function ProviderEndpointSummary({
+function ProviderFormatStatusBlock({
   label,
-  baseUrl,
-  endpoint,
-  providerName,
   children,
 }: {
   label: string;
-  baseUrl: string;
-  endpoint: string;
-  providerName: string;
   children?: ReactNode;
 }): JSX.Element {
-  const preview = previewUpstreamUrl(baseUrl, endpoint, { providerName });
-
   return (
-    <div className="flex min-w-0 flex-col gap-2 border-t border-border/60 pt-2 first:border-t-0 first:pt-0">
-      <div className="grid min-w-0 gap-1 text-xs sm:grid-cols-[104px_minmax(0,1fr)]">
-        <span className="font-medium text-muted-foreground">{label}</span>
-        <code className="min-w-0 break-all font-mono text-foreground/80">{baseUrl}</code>
-        <span className="text-[10px] uppercase text-muted-foreground/80">Final</span>
-        <code className="min-w-0 break-all font-mono text-foreground">{preview.finalUrl}</code>
-      </div>
-      {preview.diagnostics.length > 0 && (
-        <div className="space-y-1 text-xs">
-          {preview.diagnostics.map((diagnostic) => (
-            <EndpointDiagnosticLine
-              key={`${diagnostic.severity}:${diagnostic.message}`}
-              diagnostic={diagnostic}
-            />
-          ))}
-        </div>
-      )}
+    <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>
   );
@@ -293,9 +251,38 @@ function providerTestTargets(provider: ProviderConfig): string[] {
   return targets;
 }
 
-function ProviderTestCoverage({ provider }: { provider: ProviderConfig }): JSX.Element {
-  const targets = providerTestTargets(provider);
-  if (targets.length === 0) {
+type CapabilityChipTone = "active" | "quiet" | "response";
+
+function CapabilityChip({
+  label,
+  enabled,
+  tone,
+}: {
+  label: string;
+  enabled: boolean;
+  tone?: CapabilityChipTone;
+}): JSX.Element {
+  const resolvedTone: CapabilityChipTone = tone ?? (enabled ? "active" : "quiet");
+  const className =
+    resolvedTone === "response" && enabled
+      ? "border-sky-300/30 bg-sky-300/[0.09] text-sky-100"
+      : enabled
+        ? "border-border/70 bg-muted/25 text-foreground/80"
+        : "border-border/50 bg-transparent text-muted-foreground/70";
+  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" />}
+      {label}
+    </span>
+  );
+}
+
+function ProviderCapabilitySummary({ provider }: { provider: ProviderConfig }): 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">
         Test requires at least one configured endpoint.
@@ -305,16 +292,15 @@ function ProviderTestCoverage({ provider }: { provider: ProviderConfig }): JSX.E
 
   return (
     <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-      <span>Test covers</span>
-      {targets.map((target) => (
-        <span
-          key={target}
-          className="rounded border border-border/70 bg-muted/25 px-1.5 py-0.5 text-foreground/80"
-        >
-          {target}
-        </span>
-      ))}
-      <span>non-stream + stream</span>
+      <span>Capabilities</span>
+      {hasAnthropic && <CapabilityChip label="Anthropic" enabled={true} />}
+      {hasChat && <CapabilityChip label="OpenAI Chat" enabled={true} />}
+      <CapabilityChip
+        label={hasResponses ? "OpenAI Responses" : "No OpenAI Responses"}
+        enabled={hasResponses}
+        tone="response"
+      />
+      <span>tested non-stream + stream</span>
     </div>
   );
 }
@@ -570,23 +556,14 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
       displayTiming.push(timingParts[i]);
     }
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="flex items-center gap-1 text-xs text-cyan-100 shrink-0">
-              <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>
-          </TooltipTrigger>
-          <TooltipContent>Connection test passed</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <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>
     );
   }
 
@@ -599,14 +576,7 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     <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)}
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="truncate">{errorMessage}</span>
-            </TooltipTrigger>
-            <TooltipContent>Connection test failed</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <span className="truncate">{errorMessage}</span>
         {hasDetails && (
           <button
             type="button"
@@ -703,27 +673,13 @@ export function ProviderCard({
   const testedModelsLabel = modelResultsLabel(testResults);
   const providerSourceBadge =
     provider.source === "company" ? (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100">
-              Company
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>Company-provided API key</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <span className="shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100">
+        Company
+      </span>
     ) : provider.source === "personal" ? (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="shrink-0 rounded border border-violet-300/20 bg-violet-300/[0.08] px-1.5 py-0.5 text-xs text-violet-100">
-              Personal
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>Your personal API key</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <span className="shrink-0 rounded border border-violet-300/20 bg-violet-300/[0.08] px-1.5 py-0.5 text-xs text-violet-100">
+        Personal
+      </span>
     ) : null;
 
   return (
@@ -762,7 +718,7 @@ export function ProviderCard({
       </div>
 
       <div className="flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-        <ProviderTestCoverage provider={provider} />
+        <ProviderCapabilitySummary 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>
@@ -838,43 +794,49 @@ export function ProviderCard({
             </div>
           )}
 
-          {providerHasEndpoint(provider.anthropicBaseUrl) && (
-            <ProviderEndpointSummary
-              label="Anthropic"
-              baseUrl={provider.anthropicBaseUrl}
-              endpoint={PATH_V1_MESSAGES}
-              providerName={provider.name}
-            >
-              {testResults !== undefined && (
-                <ProviderFormatTestStatus results={testResults.anthropic} />
+          {(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>
               )}
-            </ProviderEndpointSummary>
-          )}
 
-          {providerHasEndpoint(provider.openaiBaseUrl) && (
-            <ProviderEndpointSummary
-              label="Chat"
-              baseUrl={provider.openaiBaseUrl}
-              endpoint={PATH_V1_CHAT_COMPLETIONS}
-              providerName={provider.name}
-            >
-              {testResults !== undefined && (
-                <ProviderFormatTestStatus results={testResults.openaiChat} />
+              {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>
               )}
-            </ProviderEndpointSummary>
-          )}
 
-          {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
-            <ProviderEndpointSummary
-              label="Responses"
-              baseUrl={provider.openaiResponsesBaseUrl}
-              endpoint={PATH_V1_RESPONSES}
-              providerName={provider.name}
-            >
-              {testResults !== undefined && (
-                <ProviderFormatTestStatus results={testResults.openaiResponses} />
+              {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>
+              )}
+
+              {!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>
               )}
-            </ProviderEndpointSummary>
+            </div>
           )}
 
           {testResults?.models !== undefined && Object.keys(testResults.models).length > 0 && (

package/src/components/providers/ProvidersPanel.tsx

@@ -1,7 +1,6 @@
 import { type JSX, useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { z } from "zod";
 import { Button } from "../ui/button";
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Plus, AlertCircle, Copy, Check, Download, Upload, Scan } from "lucide-react";
 import { ImportWizardDialog } from "./ImportWizardDialog";
 import { ConfirmDialog } from "../ui/confirm-dialog";
@@ -535,7 +534,7 @@ export function ProvidersPanel({
   if (showForm || editingProvider) {
     return (
       <div className="space-y-4">
-        <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
+        <div className="sticky top-0 z-10 flex items-center justify-between gap-3 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
           <h3 className="text-lg font-medium">
             {editingProvider ? "Edit Provider" : "Add New Provider"}
           </h3>
@@ -554,41 +553,27 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
+      <div className="sticky top-0 z-10 flex items-center justify-between gap-3 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
         <h3 className="text-lg font-medium">Providers</h3>
         <div className="flex items-center gap-2">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handleExport(false)}
-                  className="gap-1 hover:bg-muted"
-                >
-                  <Download className="size-3" />
-                  Export
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Download providers as JSON for backup or sharing</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleImportClick}
-                  className="gap-1 hover:bg-muted"
-                >
-                  <Upload className="size-3" />
-                  Import
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Import providers from an exported JSON file</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleExport(false)}
+            className="gap-1 hover:bg-muted"
+          >
+            <Download className="size-3" />
+            Export
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleImportClick}
+            className="gap-1 hover:bg-muted"
+          >
+            <Upload className="size-3" />
+            Import
+          </Button>
           <input
             type="file"
             ref={fileInputRef}
@@ -596,24 +581,15 @@ export function ProvidersPanel({
             onChange={handleFileChange}
             style={{ display: "none" }}
           />
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowImportWizard(true)}
-                  className="gap-1"
-                >
-                  <Scan className="size-3" />
-                  Scan
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                Detect and import provider configs from Claude Code and OpenCode
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowImportWizard(true)}
+            className="gap-1"
+          >
+            <Scan className="size-3" />
+            Scan
+          </Button>
           <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
             <Plus className="size-4" />
             Add Provider
@@ -622,38 +598,29 @@ export function ProvidersPanel({
       </div>
 
       {configPath !== null && (
-        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-xs text-muted-foreground">
+        <div className="flex items-center gap-2 rounded-[8px] bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
           <span className="shrink-0">Config:</span>
           <span className="font-mono truncate" title={configPath}>
             {configPath}
           </span>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => {
-                    void copyTextToClipboard(configPath).then((success) => {
-                      if (!success) return;
-                      setConfigPathCopied(true);
-                      setTimeout(() => setConfigPathCopied(false), 2000);
-                    });
-                  }}
-                  className="shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors"
-                  aria-label={
-                    configPathCopied ? "Copied config file path" : "Copy config file path"
-                  }
-                >
-                  {configPathCopied ? (
-                    <Check className="size-3 text-cyan-300" />
-                  ) : (
-                    <Copy className="size-3" />
-                  )}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>Copy config file path to clipboard</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <button
+            type="button"
+            onClick={() => {
+              void copyTextToClipboard(configPath).then((success) => {
+                if (!success) return;
+                setConfigPathCopied(true);
+                setTimeout(() => setConfigPathCopied(false), 2000);
+              });
+            }}
+            className="ml-auto shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={configPathCopied ? "Copied config file path" : "Copy config file path"}
+          >
+            {configPathCopied ? (
+              <Check className="size-3 text-cyan-300" />
+            ) : (
+              <Copy className="size-3" />
+            )}
+          </button>
         </div>
       )}
 
@@ -674,32 +641,20 @@ export function ProvidersPanel({
         </div>
       ) : (
         <div className="space-y-3">
-          <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
+          <div className="inline-flex w-fit gap-1 rounded-[8px] bg-muted/20 p-1">
             {(["all", "personal", "company"] as const).map((tab) => (
-              <TooltipProvider key={tab}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() => setSourceFilter(tab)}
-                      className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-                        sourceFilter === tab
-                          ? "border-primary text-primary"
-                          : "border-transparent text-muted-foreground hover:text-foreground"
-                      }`}
-                    >
-                      {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {tab === "all"
-                      ? "Show all providers"
-                      : tab === "personal"
-                        ? "Providers you configured yourself"
-                        : "Providers set by your organization"}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <button
+                key={tab}
+                type="button"
+                onClick={() => setSourceFilter(tab)}
+                className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+                  sourceFilter === tab
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
+              </button>
             ))}
           </div>
           <div ref={listScrollRef} className="space-y-3">