@tonyclaw/agent-inspector 2.1.16 → 2.1.18

package/src/components/providers/ProviderCard.tsx

@@ -31,7 +31,15 @@ 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,
   ProviderTestResult as TestResult,
   ProviderTestResults as TestResults,
@@ -65,8 +73,6 @@ function isNotConfiguredState(result: ProviderTestState): result is { notConfigu
   return Object.prototype.hasOwnProperty.call(result, "notConfigured");
 }
 
-type ProviderFormatTestResults = TestResults["anthropic"];
-
 function hasText(value: string | undefined): value is string {
   return value !== undefined && value.trim() !== "";
 }
@@ -206,12 +212,12 @@ function ProviderFormatTestStatus({
   results: ProviderFormatTestResults;
 }): JSX.Element {
   return (
-    <div className="flex min-w-0 flex-col gap-2">
-      <div className="flex min-w-0 flex-col gap-1">
+    <div className="grid min-w-0 gap-2 sm:grid-cols-2">
+      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
         <span className="text-[10px] text-muted-foreground">Non-stream</span>
         <TestStatus result={results.nonStreaming} />
       </div>
-      <div className="flex min-w-0 flex-col gap-1">
+      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
         <span className="text-[10px] text-muted-foreground">Stream</span>
         <TestStatus result={results.streaming} />
       </div>
@@ -219,6 +225,56 @@ 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({
+  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>
+      )}
+      {children}
+    </div>
+  );
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -314,8 +370,8 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
-              <CheckCircle className="size-3" />
+            <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>
@@ -440,6 +496,30 @@ export function ProviderCard({
   const canRefreshMetadata =
     provider.modelMetadataUrl !== undefined && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
+  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>
+    ) : 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>
+    ) : null;
 
   return (
     <div
@@ -448,7 +528,8 @@ export function ProviderCard({
       <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>
-          {provider.source === "company" && (
+          {providerSourceBadge}
+          {providerSourceBadge === null && provider.source === "company" && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -460,7 +541,7 @@ export function ProviderCard({
               </Tooltip>
             </TooltipProvider>
           )}
-          {provider.source === "personal" && (
+          {providerSourceBadge === null && provider.source === "personal" && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -575,39 +656,47 @@ export function ProviderCard({
           className="text-muted-foreground hover:text-foreground transition-colors p-1"
           aria-label="Copy API key"
         >
-          {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+          {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
         </button>
       </div>
 
       {provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">Anthropic:</span>{" "}
-            <span className="truncate">{provider.anthropicBaseUrl}</span>
-          </div>
+        <ProviderEndpointSummary
+          label="Anthropic"
+          baseUrl={provider.anthropicBaseUrl}
+          endpoint={PATH_V1_MESSAGES}
+          providerName={provider.name}
+        >
           {testResults !== undefined && (
             <ProviderFormatTestStatus results={testResults.anthropic} />
           )}
-        </div>
+        </ProviderEndpointSummary>
       )}
 
       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">OpenAI Chat:</span>{" "}
-            <span className="truncate">{provider.openaiBaseUrl}</span>
-          </div>
-          {testResults !== undefined && <ProviderFormatTestStatus results={testResults.openai} />}
-        </div>
+        <ProviderEndpointSummary
+          label="OpenAI Chat"
+          baseUrl={provider.openaiBaseUrl}
+          endpoint={PATH_V1_CHAT_COMPLETIONS}
+          providerName={provider.name}
+        >
+          {testResults !== undefined && (
+            <ProviderFormatTestStatus results={testResults.openaiChat} />
+          )}
+        </ProviderEndpointSummary>
       )}
 
       {provider.openaiResponsesBaseUrl !== undefined && provider.openaiResponsesBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">OpenAI Responses:</span>{" "}
-            <span className="truncate">{provider.openaiResponsesBaseUrl}</span>
-          </div>
-        </div>
+        <ProviderEndpointSummary
+          label="OpenAI Responses"
+          baseUrl={provider.openaiResponsesBaseUrl}
+          endpoint={PATH_V1_RESPONSES}
+          providerName={provider.name}
+        >
+          {testResults !== undefined && (
+            <ProviderFormatTestStatus results={testResults.openaiResponses} />
+          )}
+        </ProviderEndpointSummary>
       )}
 
       {testResults?.testedAt !== undefined && (
@@ -644,9 +733,15 @@ export function ProviderCard({
                       )}
                     {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
                       <th className="text-left py-1 px-2 font-medium text-muted-foreground">
-                        OpenAI
+                        Chat
                       </th>
                     )}
+                    {provider.openaiResponsesBaseUrl !== undefined &&
+                      provider.openaiResponsesBaseUrl !== "" && (
+                        <th className="text-left py-1 px-2 font-medium text-muted-foreground">
+                          Responses
+                        </th>
+                      )}
                   </tr>
                 </thead>
                 <tbody>
@@ -661,9 +756,15 @@ export function ProviderCard({
                         )}
                       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
                         <td className="py-1 px-2 align-top">
-                          <ProviderFormatTestStatus results={modelResult.openai} />
+                          <ProviderFormatTestStatus results={modelResult.openaiChat} />
                         </td>
                       )}
+                      {provider.openaiResponsesBaseUrl !== undefined &&
+                        provider.openaiResponsesBaseUrl !== "" && (
+                          <td className="py-1 px-2 align-top">
+                            <ProviderFormatTestStatus results={modelResult.openaiResponses} />
+                          </td>
+                        )}
                     </tr>
                   ))}
                 </tbody>

package/src/components/providers/ProviderForm.tsx

@@ -6,7 +6,13 @@ import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig, ProviderModelMetadata } from "../../lib/providerContract";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import { maskApiKey } from "../../lib/mask";
-import { buildUpstreamUrl } from "../../lib/upstreamUrl";
+import {
+  PATH_V1_CHAT_COMPLETIONS,
+  PATH_V1_MESSAGES,
+  PATH_V1_RESPONSES,
+  previewUpstreamUrl,
+  type UpstreamUrlPreview,
+} from "../../lib/upstreamUrl";
 import { formatContextWindowInput, parseContextWindowTokensInput } from "../../lib/utils";
 
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
@@ -17,9 +23,9 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding",
 ];
-const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
-const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
-const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
+const ANTHROPIC_MESSAGES_ENDPOINT = PATH_V1_MESSAGES;
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = PATH_V1_CHAT_COMPLETIONS;
+const OPENAI_RESPONSES_ENDPOINT = PATH_V1_RESPONSES;
 
 // Known provider presets - maps provider name keywords to their API URLs
 const KNOWN_PROVIDER_PRESETS: Record<
@@ -275,25 +281,45 @@ function stripEndpointSuffix(value: string | undefined, endpoint: string): strin
     : trimmed;
 }
 
-function previewEndpointUrl(baseUrl: string, endpoint: string): string | null {
+function previewEndpointUrl(
+  baseUrl: string,
+  endpoint: string,
+  providerName: string,
+): UpstreamUrlPreview | null {
   const trimmed = baseUrl.trim();
-  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+  return trimmed === "" ? null : previewUpstreamUrl(trimmed, endpoint, { providerName });
 }
 
 function EndpointUrlPreview({
   baseUrl,
   endpoint,
+  providerName,
 }: {
   baseUrl: string;
   endpoint: string;
+  providerName: string;
 }): JSX.Element | null {
-  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
-  if (finalUrl === null) return null;
+  const preview = previewEndpointUrl(baseUrl, endpoint, providerName);
+  if (preview === null) return null;
 
   return (
     <div className="border border-border bg-muted/40 rounded-md px-3 py-2 text-xs">
       <div className="text-muted-foreground">Final URL</div>
-      <div className="break-all font-mono text-foreground">{finalUrl}</div>
+      <div className="break-all font-mono text-foreground">{preview.finalUrl}</div>
+      {preview.diagnostics.length > 0 && (
+        <div className="mt-2 space-y-1">
+          {preview.diagnostics.map((diagnostic) => (
+            <div
+              key={`${diagnostic.severity}:${diagnostic.message}`}
+              className={
+                diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground"
+              }
+            >
+              {diagnostic.message}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -729,7 +755,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             className="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0"
             aria-label="Copy API key"
           >
-            {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+            {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
           </button>
         </div>
         {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
@@ -964,7 +990,11 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           {errors.anthropicBaseUrl !== undefined && (
             <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
           )}
-          <EndpointUrlPreview baseUrl={anthropicBaseUrl} endpoint={ANTHROPIC_MESSAGES_ENDPOINT} />
+          <EndpointUrlPreview
+            baseUrl={anthropicBaseUrl}
+            endpoint={ANTHROPIC_MESSAGES_ENDPOINT}
+            providerName={name}
+          />
           <p className="text-xs text-muted-foreground">
             Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic
             format.
@@ -1000,6 +1030,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <EndpointUrlPreview
               baseUrl={openaiBaseUrl}
               endpoint={OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+              providerName={name}
             />
             <p className="text-xs text-muted-foreground">
               OpenAI Chat Completions-compatible base URL. Leave empty if this provider only
@@ -1032,6 +1063,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <EndpointUrlPreview
               baseUrl={openaiResponsesBaseUrl}
               endpoint={OPENAI_RESPONSES_ENDPOINT}
+              providerName={name}
             />
             <p className="text-xs text-muted-foreground">
               Optional Responses-compatible base URL. Set only when the provider supports the

package/src/components/providers/ProvidersPanel.tsx

@@ -631,7 +631,7 @@ export function ProvidersPanel({
                   }
                 >
                   {configPathCopied ? (
-                    <Check className="size-3 text-green-500" />
+                    <Check className="size-3 text-cyan-300" />
                   ) : (
                     <Copy className="size-3" />
                   )}