@tonyclaw/agent-inspector 3.0.25 → 3.0.27

package/src/components/providers/ProviderForm.tsx

@@ -1,11 +1,9 @@
 import { type JSX, useState, useEffect, useRef } from "react";
 import { Button } from "../ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 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 {
   PATH_V1_CHAT_COMPLETIONS,
   PATH_V1_MESSAGES,
@@ -14,6 +12,7 @@ import {
   type UpstreamUrlPreview,
 } from "../../lib/upstreamUrl";
 import { formatContextWindowInput, parseContextWindowTokensInput } from "../../lib/utils";
+import { deriveProviderCapabilities, endpointForCapability } from "./providerFormCapabilities";
 
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
 const ZHIPU_CODING_PROVIDER_KEYWORDS = [
@@ -325,8 +324,9 @@ function EndpointUrlPreview({
 }
 
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
+  const initialCapabilities = deriveProviderCapabilities(provider);
   const [name, setName] = useState(provider?.name ?? "");
-  const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
+  const [apiKey, setApiKey] = useState("");
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
   const initialModels = provider?.models;
@@ -339,7 +339,12 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       initialModels !== undefined && initialModels.length > 0 ? initialModels : [""],
     ),
   );
-  const [activeTab, setActiveTab] = useState<"anthropic" | "openai">("anthropic");
+  const [supportsAnthropic, setSupportsAnthropic] = useState(initialCapabilities.anthropic);
+  const [supportsOpenai, setSupportsOpenai] = useState(initialCapabilities.openai);
+  const [supportsOpenaiChat, setSupportsOpenaiChat] = useState(initialCapabilities.openaiChat);
+  const [supportsOpenaiResponses, setSupportsOpenaiResponses] = useState(
+    initialCapabilities.openaiResponses,
+  );
   const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(
     stripEndpointSuffix(provider?.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
   );
@@ -405,10 +410,16 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   useEffect(() => {
     if (provider) {
       setName(provider.name);
-      setApiKey(provider.apiKey);
+      setApiKey("");
+      setShowApiKey(false);
       const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
       setModels(nextModels);
       setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
+      const nextCapabilities = deriveProviderCapabilities(provider);
+      setSupportsAnthropic(nextCapabilities.anthropic);
+      setSupportsOpenai(nextCapabilities.openai);
+      setSupportsOpenaiChat(nextCapabilities.openaiChat);
+      setSupportsOpenaiResponses(nextCapabilities.openaiResponses);
       setAnthropicBaseUrl(
         stripEndpointSuffix(provider.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
       );
@@ -471,20 +482,38 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (!name.trim()) {
       newErrors.name = "Name is required";
     }
-    if (!apiKey.trim()) {
+    if (provider === undefined && !apiKey.trim()) {
       newErrors.apiKey = "API key is required";
     }
     if (models.length === 0 || models.every((m) => !m.trim())) {
       newErrors.models = "At least one model is required";
     }
-    if (anthropicBaseUrl.trim() && !isValidUrl(anthropicBaseUrl.trim())) {
-      newErrors.anthropicBaseUrl = "Invalid URL format";
+    if (!supportsAnthropic && !supportsOpenai) {
+      newErrors.capabilities = "Select at least one API capability";
+    }
+    if (supportsOpenai && !supportsOpenaiChat && !supportsOpenaiResponses) {
+      newErrors.openaiCapabilities = "Select Chat Completions, Responses, or both";
+    }
+    if (supportsAnthropic) {
+      if (anthropicBaseUrl.trim() === "") {
+        newErrors.anthropicBaseUrl = "Anthropic base URL is required";
+      } else if (!isValidUrl(anthropicBaseUrl.trim())) {
+        newErrors.anthropicBaseUrl = "Invalid URL format";
+      }
     }
-    if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
-      newErrors.openaiBaseUrl = "Invalid URL format";
+    if (supportsOpenai && supportsOpenaiChat) {
+      if (openaiBaseUrl.trim() === "") {
+        newErrors.openaiBaseUrl = "OpenAI Chat base URL is required";
+      } else if (!isValidUrl(openaiBaseUrl.trim())) {
+        newErrors.openaiBaseUrl = "Invalid URL format";
+      }
     }
-    if (openaiResponsesBaseUrl.trim() && !isValidUrl(openaiResponsesBaseUrl.trim())) {
-      newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+    if (supportsOpenai && supportsOpenaiResponses) {
+      if (openaiResponsesBaseUrl.trim() === "") {
+        newErrors.openaiResponsesBaseUrl = "OpenAI Responses base URL is required";
+      } else if (!isValidUrl(openaiResponsesBaseUrl.trim())) {
+        newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+      }
     }
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
@@ -504,9 +533,6 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           "Output limit should not exceed context window";
       }
     });
-    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim() && !openaiResponsesBaseUrl.trim()) {
-      newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
-    }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }
@@ -631,14 +657,27 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     e.preventDefault();
     if (!validate()) return;
     setIsSubmitting(true);
+    const clearDisabledEndpoints = provider !== undefined;
     try {
       onSubmit({
         name: name.trim(),
         apiKey: apiKey.trim(),
         models: models.map((m) => m.trim()).filter((m) => m !== ""),
-        anthropicBaseUrl: anthropicBaseUrl.trim() || undefined,
-        openaiBaseUrl: openaiBaseUrl.trim() || undefined,
-        openaiResponsesBaseUrl: openaiResponsesBaseUrl.trim() || undefined,
+        anthropicBaseUrl: endpointForCapability(
+          supportsAnthropic,
+          anthropicBaseUrl,
+          clearDisabledEndpoints,
+        ),
+        openaiBaseUrl: endpointForCapability(
+          supportsOpenai && supportsOpenaiChat,
+          openaiBaseUrl,
+          clearDisabledEndpoints,
+        ),
+        openaiResponsesBaseUrl: endpointForCapability(
+          supportsOpenai && supportsOpenaiResponses,
+          openaiResponsesBaseUrl,
+          clearDisabledEndpoints,
+        ),
         apiDocsUrl: apiDocsUrl.trim() || undefined,
         modelMetadataUrl: modelMetadataUrl.trim() || undefined,
         modelMetadata: buildModelMetadata(),
@@ -666,6 +705,191 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         {errors.name !== undefined && <p className="text-xs text-destructive">{errors.name}</p>}
       </div>
 
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium">
+          Capabilities <span className="text-destructive">*</span>
+        </legend>
+        <div className="divide-y divide-border overflow-hidden rounded-md border border-border">
+          <div className={supportsOpenai ? "bg-primary/[0.04] px-3 py-3" : "px-3 py-3"}>
+            <label
+              htmlFor="provider-capability-openai"
+              className="flex cursor-pointer items-start gap-3"
+            >
+              <input
+                id="provider-capability-openai"
+                type="checkbox"
+                checked={supportsOpenai}
+                onChange={(event) => setSupportsOpenai(event.target.checked)}
+                className="mt-0.5 size-4 shrink-0 accent-primary"
+              />
+              <span className="min-w-0">
+                <span className="block text-sm font-medium">OpenAI</span>
+                <span className="block text-xs text-muted-foreground">
+                  Chat Completions and Responses
+                </span>
+              </span>
+            </label>
+            {supportsOpenai && (
+              <div className="ml-7 mt-3 flex flex-wrap gap-x-5 gap-y-2 border-t border-border/70 pt-3">
+                <label
+                  htmlFor="provider-capability-openai-chat"
+                  className="flex cursor-pointer items-center gap-2 text-sm"
+                >
+                  <input
+                    id="provider-capability-openai-chat"
+                    type="checkbox"
+                    checked={supportsOpenaiChat}
+                    onChange={(event) => setSupportsOpenaiChat(event.target.checked)}
+                    className="size-4 shrink-0 accent-primary"
+                  />
+                  Chat Completions
+                </label>
+                <label
+                  htmlFor="provider-capability-openai-responses"
+                  className="flex cursor-pointer items-center gap-2 text-sm"
+                >
+                  <input
+                    id="provider-capability-openai-responses"
+                    type="checkbox"
+                    checked={supportsOpenaiResponses}
+                    onChange={(event) => setSupportsOpenaiResponses(event.target.checked)}
+                    className="size-4 shrink-0 accent-primary"
+                  />
+                  Responses
+                </label>
+              </div>
+            )}
+            {errors.openaiCapabilities !== undefined && supportsOpenai && (
+              <p className="ml-7 mt-2 text-xs text-destructive">{errors.openaiCapabilities}</p>
+            )}
+          </div>
+          <label
+            htmlFor="provider-capability-anthropic"
+            className={`flex cursor-pointer items-start gap-3 px-3 py-3 ${
+              supportsAnthropic ? "bg-primary/[0.04]" : ""
+            }`}
+          >
+            <input
+              id="provider-capability-anthropic"
+              type="checkbox"
+              checked={supportsAnthropic}
+              onChange={(event) => setSupportsAnthropic(event.target.checked)}
+              className="mt-0.5 size-4 shrink-0 accent-primary"
+            />
+            <span className="min-w-0">
+              <span className="block text-sm font-medium">Anthropic</span>
+              <span className="block text-xs text-muted-foreground">Messages</span>
+            </span>
+          </label>
+        </div>
+        {errors.capabilities !== undefined && (
+          <p className="text-xs text-destructive">{errors.capabilities}</p>
+        )}
+      </fieldset>
+
+      {(supportsAnthropic ||
+        (supportsOpenai && (supportsOpenaiChat || supportsOpenaiResponses))) && (
+        <section className="space-y-5 border-l border-border pl-4" aria-label="API endpoints">
+          <h3 className="text-sm font-medium">Endpoint Configuration</h3>
+
+          {supportsAnthropic && (
+            <div className="space-y-2">
+              <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
+                Anthropic Messages Base URL <span className="text-destructive">*</span>
+              </label>
+              <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+                <input
+                  id="provider-anthropic-base-url"
+                  type="text"
+                  value={anthropicBaseUrl}
+                  onChange={(event) => {
+                    setManualAnthropicUrlOverride(true);
+                    setAnthropicBaseUrl(event.target.value);
+                  }}
+                  placeholder="https://api.anthropic.com"
+                  className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                  {ANTHROPIC_MESSAGES_ENDPOINT}
+                </span>
+              </div>
+              {errors.anthropicBaseUrl !== undefined && (
+                <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
+              )}
+              <EndpointUrlPreview
+                baseUrl={anthropicBaseUrl}
+                endpoint={ANTHROPIC_MESSAGES_ENDPOINT}
+                providerName={name}
+              />
+            </div>
+          )}
+
+          {supportsOpenai && supportsOpenaiChat && (
+            <div className="space-y-2">
+              <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
+                OpenAI Chat Base URL <span className="text-destructive">*</span>
+              </label>
+              <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+                <input
+                  id="provider-openai-base-url"
+                  type="text"
+                  value={openaiBaseUrl}
+                  onChange={(event) => {
+                    setManualOpenaiUrlOverride(true);
+                    setOpenaiBaseUrl(event.target.value);
+                  }}
+                  placeholder="https://api.openai.com"
+                  className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                  {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+                </span>
+              </div>
+              {errors.openaiBaseUrl !== undefined && (
+                <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
+              )}
+              <EndpointUrlPreview
+                baseUrl={openaiBaseUrl}
+                endpoint={OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+                providerName={name}
+              />
+            </div>
+          )}
+
+          {supportsOpenai && supportsOpenaiResponses && (
+            <div className="space-y-2">
+              <label htmlFor="provider-openai-responses-base-url" className="text-sm font-medium">
+                OpenAI Responses Base URL <span className="text-destructive">*</span>
+              </label>
+              <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+                <input
+                  id="provider-openai-responses-base-url"
+                  type="text"
+                  value={openaiResponsesBaseUrl}
+                  onChange={(event) => {
+                    setManualOpenaiResponsesUrlOverride(true);
+                    setOpenaiResponsesBaseUrl(event.target.value);
+                  }}
+                  placeholder="https://api.openai.com"
+                  className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                  {OPENAI_RESPONSES_ENDPOINT}
+                </span>
+              </div>
+              {errors.openaiResponsesBaseUrl !== undefined && (
+                <p className="text-xs text-destructive">{errors.openaiResponsesBaseUrl}</p>
+              )}
+              <EndpointUrlPreview
+                baseUrl={openaiResponsesBaseUrl}
+                endpoint={OPENAI_RESPONSES_ENDPOINT}
+                providerName={name}
+              />
+            </div>
+          )}
+        </section>
+      )}
+
       <div className="space-y-2">
         <label htmlFor="provider-source" className="text-sm font-medium">
           Token Source
@@ -726,19 +950,15 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
 
       <div className="space-y-2">
         <label htmlFor="provider-apikey" className="text-sm font-medium">
-          API Key <span className="text-destructive">*</span>
+          API Key {provider === undefined && <span className="text-destructive">*</span>}
         </label>
         <div className="flex items-center gap-2">
           <input
             id="provider-apikey"
-            type="text"
-            value={showApiKey || apiKey.length === 0 ? apiKey : maskApiKey(apiKey)}
+            type={showApiKey ? "text" : "password"}
+            value={apiKey}
             onChange={(e) => setApiKey(e.target.value)}
-            onFocus={() => {
-              if (!showApiKey && apiKey.length > 0) setShowApiKey(true);
-            }}
-            placeholder="sk-ant-..."
-            readOnly={!showApiKey && apiKey.length > 0}
+            placeholder={provider === undefined ? "sk-ant-..." : "Leave blank to keep current key"}
             className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
           />
           <button
@@ -758,6 +978,11 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
           </button>
         </div>
+        {provider !== undefined && apiKey.trim() === "" && (
+          <p className="text-xs text-muted-foreground">
+            A key is configured. Enter a new value only to rotate it.
+          </p>
+        )}
         {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
       </div>
 
@@ -924,155 +1149,6 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         {errors.models !== undefined && <p className="text-xs text-destructive">{errors.models}</p>}
       </div>
 
-      <div className="space-y-2">
-        <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => setActiveTab("anthropic")}
-                  className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-                    activeTab === "anthropic"
-                      ? "border-primary text-primary"
-                      : "border-transparent text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  Anthropic Format
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>Anthropic Messages API format</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => setActiveTab("openai")}
-                  className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-                    activeTab === "openai"
-                      ? "border-primary text-primary"
-                      : "border-transparent text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  OpenAI Format
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>OpenAI Chat Completions API format</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-        {errors.format !== undefined && <p className="text-xs text-destructive">{errors.format}</p>}
-      </div>
-
-      {activeTab === "anthropic" && (
-        <div className="space-y-2">
-          <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
-            Anthropic Base URL
-          </label>
-          <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
-            <input
-              id="provider-anthropic-base-url"
-              type="text"
-              value={anthropicBaseUrl}
-              onChange={(e) => {
-                setManualAnthropicUrlOverride(true);
-                setAnthropicBaseUrl(e.target.value);
-              }}
-              placeholder="https://api.anthropic.com"
-              className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            />
-            <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
-              {ANTHROPIC_MESSAGES_ENDPOINT}
-            </span>
-          </div>
-          {errors.anthropicBaseUrl !== undefined && (
-            <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
-          )}
-          <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.
-          </p>
-        </div>
-      )}
-
-      {activeTab === "openai" && (
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
-              OpenAI Chat Base URL
-            </label>
-            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
-              <input
-                id="provider-openai-base-url"
-                type="text"
-                value={openaiBaseUrl}
-                onChange={(e) => {
-                  setManualOpenaiUrlOverride(true);
-                  setOpenaiBaseUrl(e.target.value);
-                }}
-                placeholder="https://api.openai.com"
-                className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-              />
-              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
-                {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
-              </span>
-            </div>
-            {errors.openaiBaseUrl !== undefined && (
-              <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
-            )}
-            <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
-              supports the Responses API.
-            </p>
-          </div>
-          <div className="space-y-2">
-            <label htmlFor="provider-openai-responses-base-url" className="text-sm font-medium">
-              OpenAI Responses Base URL
-            </label>
-            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
-              <input
-                id="provider-openai-responses-base-url"
-                type="text"
-                value={openaiResponsesBaseUrl}
-                onChange={(e) => {
-                  setManualOpenaiResponsesUrlOverride(true);
-                  setOpenaiResponsesBaseUrl(e.target.value);
-                }}
-                placeholder="https://api.openai.com"
-                className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-              />
-              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
-                {OPENAI_RESPONSES_ENDPOINT}
-              </span>
-            </div>
-            {errors.openaiResponsesBaseUrl !== undefined && (
-              <p className="text-xs text-destructive">{errors.openaiResponsesBaseUrl}</p>
-            )}
-            <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
-              Responses API.
-            </p>
-          </div>
-        </div>
-      )}
-
       <div className="space-y-2">
         <label htmlFor="provider-api-docs-url" className="text-sm font-medium">
           API Docs URL

package/src/components/providers/ProvidersPanel.tsx

@@ -70,15 +70,25 @@ type ProviderFormData = {
   source?: "company" | "personal";
 };
 
-function createProviderPayload(data: ProviderFormData) {
+function endpointPayloadValue(
+  value: string | undefined,
+  preserveEmptyEndpoints: boolean,
+): string | undefined {
+  if ((value?.length ?? 0) > 0) return value;
+  return preserveEmptyEndpoints && value !== undefined ? "" : undefined;
+}
+
+function createProviderPayload(data: ProviderFormData, preserveEmptyEndpoints = false) {
   return {
     name: data.name,
-    apiKey: data.apiKey,
+    ...(data.apiKey.trim() === "" ? {} : { apiKey: data.apiKey }),
     models: data.models,
-    anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : undefined,
-    openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : undefined,
-    openaiResponsesBaseUrl:
-      (data.openaiResponsesBaseUrl?.length ?? 0) > 0 ? data.openaiResponsesBaseUrl : undefined,
+    anthropicBaseUrl: endpointPayloadValue(data.anthropicBaseUrl, preserveEmptyEndpoints),
+    openaiBaseUrl: endpointPayloadValue(data.openaiBaseUrl, preserveEmptyEndpoints),
+    openaiResponsesBaseUrl: endpointPayloadValue(
+      data.openaiResponsesBaseUrl,
+      preserveEmptyEndpoints,
+    ),
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : undefined,
     modelMetadata: data.modelMetadata,
@@ -408,7 +418,7 @@ export function ProvidersPanel({
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(createProviderPayload(data)),
+            body: JSON.stringify(createProviderPayload(data, true)),
           },
           () => "Failed to update provider",
         );
@@ -420,7 +430,7 @@ export function ProvidersPanel({
         refreshProviders();
         // Only run connection test when critical fields (apiKey, model, base URLs) changed
         const criticalFieldsChanged =
-          (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") ||
+          data.apiKey.trim() !== "" ||
           JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
           (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
           (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "") ||

package/src/components/providers/SettingsDialog.tsx

@@ -471,9 +471,9 @@ function McpSettingsTab(): JSX.Element {
         value: `agent-inspector-mcp doctor --url ${endpoint}`,
       },
       {
-        id: "readonly",
-        label: "Readonly mode",
-        value: "AGENT_INSPECTOR_MCP_READONLY=1 agent-inspector",
+        id: "writes",
+        label: "Enable write tools",
+        value: "AGENT_INSPECTOR_MCP_WRITES=1 agent-inspector",
       },
       {
         id: "capabilities",

package/src/components/providers/providerFormCapabilities.ts

@@ -0,0 +1,36 @@
+import type { ProviderConfig } from "../../lib/providerContract";
+
+export type ProviderCapabilitySelection = {
+  anthropic: boolean;
+  openai: boolean;
+  openaiChat: boolean;
+  openaiResponses: boolean;
+};
+
+function hasEndpoint(value: string | undefined): boolean {
+  return value !== undefined && value.trim() !== "";
+}
+
+export function deriveProviderCapabilities(
+  provider: ProviderConfig | undefined,
+): ProviderCapabilitySelection {
+  const anthropic = hasEndpoint(provider?.anthropicBaseUrl);
+  const openaiChat = hasEndpoint(provider?.openaiBaseUrl);
+  const openaiResponses = hasEndpoint(provider?.openaiResponsesBaseUrl);
+  return {
+    anthropic,
+    openai: openaiChat || openaiResponses,
+    openaiChat,
+    openaiResponses,
+  };
+}
+
+export function endpointForCapability(
+  enabled: boolean,
+  value: string,
+  clearWhenDisabled: boolean,
+): string | undefined {
+  if (!enabled) return clearWhenDisabled ? "" : undefined;
+  const trimmed = value.trim();
+  return trimmed === "" ? undefined : trimmed;
+}

package/src/components/proxy-viewer/ProviderLogoStack.tsx

@@ -5,9 +5,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 
 const MAX_VISIBLE_LOGOS = 3;
 
-export const ROW_CHEVRON_SLOT_CLASS =
-  "flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground";
-
 export type ProviderLogoStackItem = {
   provider: Provider;
   tooltip: string;

package/src/contracts/anthropic.ts

@@ -228,8 +228,3 @@ export const SseEventSchema = z.discriminatedUnion("type", [
 
 export type AnthropicResponse = z.infer<typeof AnthropicResponseSchema>;
 export type ResponseContentBlockType = z.infer<typeof ResponseContentBlock>;
-
-// Backward-compatible aliases (originally named Inspector*)
-export const InspectorRequestSchema = AnthropicRequestSchema;
-export const InspectorResponseSchema = AnthropicResponseSchema;
-export type InspectorResponse = AnthropicResponse;

package/src/contracts/index.ts

@@ -12,7 +12,6 @@ export type {
   CapturedLog,
   LogBodyChunk,
   LogBodyPart,
-  RequestFormat,
   StreamingChunk,
   TokenUsage,
 } from "./log";
@@ -46,9 +45,6 @@ export {
 } from "./openai";
 export type {
   OpenAIResponse,
-  OpenAIResponsesRequest,
   OpenAIResponsesResponse,
-  OpenAIResponsesSSEvent,
-  OpenAIResponsesOutputItem,
   OpenAIToolCall,
 } from "./openai";