@tonyclaw/agent-inspector 3.0.25 → 3.0.26

package/src/components/providers/ProviderForm.tsx

@@ -1,7 +1,6 @@
 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";
@@ -14,6 +13,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,6 +325,7 @@ 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 [showApiKey, setShowApiKey] = useState(false);
@@ -339,7 +340,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),
   );
@@ -409,6 +415,11 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       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),
       );
@@ -477,14 +488,32 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     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
@@ -924,155 +1148,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,
     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",
         );

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/styles/globals.css

@@ -45,8 +45,6 @@
   --animate-crab-appear: crab-appear 300ms ease-out;
   --animate-crab-settle: crab-settle 400ms ease-in-out;
   --animate-crab-piano-pop: crab-piano-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
-  --animate-crab-short-leg-body: crab-short-leg-body 720ms ease-in-out infinite;
-  --animate-crab-short-leg-step: crab-short-leg-step 360ms ease-in-out infinite;
 }
 
 :root {
@@ -222,34 +220,6 @@
   }
 }
 
-@keyframes crab-short-leg-body {
-  0%,
-  100% {
-    transform: translateY(0) rotate(-1deg);
-  }
-  25% {
-    transform: translateY(1px) rotate(1.5deg);
-  }
-  50% {
-    transform: translateY(-1px) rotate(-1.5deg);
-  }
-  75% {
-    transform: translateY(1px) rotate(1deg);
-  }
-}
-
-@keyframes crab-short-leg-step {
-  0%,
-  100% {
-    transform: translateY(0) scaleY(0.72) rotate(var(--crab-leg-rest, 0deg));
-    opacity: 0.42;
-  }
-  50% {
-    transform: translateY(3px) scaleY(1.15) rotate(var(--crab-leg-step, 0deg));
-    opacity: 0.9;
-  }
-}
-
 @keyframes inspector-pet-watch {
   0%,
   100% {
@@ -317,8 +287,6 @@
   .animate-crab-piano-pop {
     animation: none !important;
   }
-  .floating-crab-body,
-  .floating-crab-leg,
   .inspector-pet-active,
   .inspector-pet-attention,
   .inspector-pet-sleeping,
@@ -379,26 +347,6 @@
     font-size: var(--inspector-font-13);
   }
 
-  .floating-crab-body {
-    animation: var(--animate-crab-short-leg-body);
-    transform-origin: 50% 74%;
-  }
-
-  .floating-crab-leg {
-    animation: var(--animate-crab-short-leg-step);
-    transform-origin: 50% 0%;
-  }
-
-  .floating-crab-leg-left {
-    --crab-leg-rest: -10deg;
-    --crab-leg-step: 14deg;
-  }
-
-  .floating-crab-leg-right {
-    --crab-leg-rest: 10deg;
-    --crab-leg-step: -14deg;
-  }
-
   .inspector-pet-active {
     animation: inspector-pet-watch 1.25s ease-in-out infinite;
   }
@@ -419,15 +367,6 @@
     animation: inspector-pet-heart 720ms ease-out forwards;
   }
 
-  [data-pet-mood="active"] .floating-crab-leg {
-    animation-duration: 260ms;
-  }
-
-  [data-pet-mood="sleeping"] .floating-crab-leg {
-    animation-duration: 1.8s;
-    opacity: 0.3;
-  }
-
   .inspector-scrollbar {
     scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
     scrollbar-width: thin;