@tonyclaw/agent-inspector 3.0.26 → 3.0.28

package/src/components/providers/ProviderCard.tsx

@@ -2,22 +2,16 @@ import { type JSX, useState } from "react";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import {
-  Eye,
-  EyeOff,
   Pencil,
   Trash2,
   RotateCw,
   CheckCircle,
   ExternalLink,
   Clock,
-  Copy,
-  Check,
   ChevronDown,
   ChevronRight,
 } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import { maskApiKey } from "../../lib/mask";
 import {
   findProviderModelMetadata,
   providerHasContextMetadata,
@@ -174,18 +168,8 @@ export function ProviderCard({
   onRefreshMetadata,
   isRefreshingMetadata = false,
 }: ProviderCardProps): JSX.Element {
-  const [showApiKey, setShowApiKey] = useState(false);
-  const [copied, setCopied] = useState(false);
   const [showDetails, setShowDetails] = useState(false);
 
-  function handleCopy() {
-    void copyTextToClipboard(provider.apiKey).then((success) => {
-      if (!success) return;
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }
-
   const docsUrl =
     provider.apiDocsUrl ??
     Object.entries(KNOWN_PROVIDER_DOCS).find(([keyword]) =>
@@ -285,26 +269,9 @@ export function ProviderCard({
 
       {showDetails && (
         <div className="space-y-3 border-t border-border/60 pt-3">
-          <div className="flex items-center gap-2">
-            <code className="flex-1 truncate rounded bg-muted px-2 py-1 text-xs text-muted-foreground">
-              {showApiKey ? provider.apiKey : maskApiKey(provider.apiKey)}
-            </code>
-            <button
-              type="button"
-              onClick={() => setShowApiKey((s) => !s)}
-              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
-              aria-label={showApiKey ? "Hide API key" : "Show API key"}
-            >
-              {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-            </button>
-            <button
-              type="button"
-              onClick={handleCopy}
-              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
-              aria-label="Copy API key"
-            >
-              {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
-            </button>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <CheckCircle className="size-3.5 text-emerald-500" />
+            <span>API key configured</span>
           </div>
 
           {provider.models !== undefined && provider.models.length > 0 && (

package/src/components/providers/ProviderForm.tsx

@@ -4,7 +4,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 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,
@@ -327,7 +326,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 [apiKey, setApiKey] = useState("");
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
   const initialModels = provider?.models;
@@ -411,7 +410,8 @@ 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));
@@ -482,7 +482,7 @@ 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())) {
@@ -950,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
@@ -982,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>
 

package/src/components/providers/ProvidersPanel.tsx

@@ -81,7 +81,7 @@ function endpointPayloadValue(
 function createProviderPayload(data: ProviderFormData, preserveEmptyEndpoints = false) {
   return {
     name: data.name,
-    apiKey: data.apiKey,
+    ...(data.apiKey.trim() === "" ? {} : { apiKey: data.apiKey }),
     models: data.models,
     anthropicBaseUrl: endpointPayloadValue(data.anthropicBaseUrl, preserveEmptyEndpoints),
     openaiBaseUrl: endpointPayloadValue(data.openaiBaseUrl, preserveEmptyEndpoints),
@@ -430,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/proxy-viewer/ConversationGroup.tsx

@@ -160,7 +160,7 @@ export const ConversationGroup = memo(function ({
   }, [group.logs, setExpanded]);
 
   return (
-    <div className="mb-2">
+    <div className="mb-1.5">
       <ConversationHeader
         conversationId={group.conversationId}
         startTime={startTime}