fix: address issues

Signed-off-by: Marek Dano <mk.dano@gmail.com>

Author: marekdano

src/components/gateways/VirtualServerDetailsPanel.tsx

@@ -587,7 +587,10 @@ export function VirtualServerDetailsPanel({
                               <span className="truncate">{identifier}</span>
                               <CopyButton
                                 value={identifier}
-                                label={`Copy ${title}`}
+                                label={intl.formatMessage(
+                                  { id: "common.copyValue" },
+                                  { label: title },
+                                )}
                                 className="size-5 text-muted-foreground"
                               />
                             </span>
@@ -598,7 +601,10 @@ export function VirtualServerDetailsPanel({
                               <span className="truncate">{identifier}</span>
                               <CopyButton
                                 value={identifier}
-                                label={`Copy ${identifier}`}
+                                label={intl.formatMessage(
+                                  { id: "common.copyValue" },
+                                  { label: identifier },
+                                )}
                                 className="size-5 text-muted-foreground"
                               />
                             </span>

src/components/prompts/PromptPreviewResult.tsx

@@ -60,7 +60,7 @@ export function PromptPreviewResult({ preview }: PromptPreviewResultProps) {
         <CodeBlock
           code={JSON.stringify({ messages: result.rendered.messages ?? [] }, null, 2)}
           language="json"
-          copyLabel="JSON"
+          copyLabel={intl.formatMessage({ id: "common.copyValue" }, { label: "JSON" })}
         />
       )}
 

src/components/servers/MCPServerDetailsPanel.tsx

@@ -490,7 +490,10 @@ export function MCPServerDetailsPanel({
                                   <span className="truncate">{identifier}</span>
                                   <CopyButton
                                     value={identifier}
-                                    label={`Copy ${title}`}
+                                    label={intl.formatMessage(
+                                      { id: "common.copyValue" },
+                                      { label: title },
+                                    )}
                                     className="size-5 text-muted-foreground"
                                   />
                                 </span>
@@ -501,7 +504,10 @@ export function MCPServerDetailsPanel({
                                   <span className="truncate">{identifier}</span>
                                   <CopyButton
                                     value={identifier}
-                                    label={`Copy ${identifier}`}
+                                    label={intl.formatMessage(
+                                      { id: "common.copyValue" },
+                                      { label: identifier },
+                                    )}
                                     className="size-5 text-muted-foreground"
                                   />
                                 </span>

src/components/servers/TestConnectionPanel.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleCheck, CircleAlert, Info, Loader2 } from "lucide-react";
+import { useIntl } from "react-intl";
 import { Button } from "../ui/button";
 import { CopyButton } from "../ui/copy-button";
 import { Input } from "../ui/input";
@@ -123,6 +124,7 @@ function FieldLabel({
 }
 
 export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
+  const intl = useIntl();
   const [status, setStatus] = useState<TestStatus>("idle");
   const [method, setMethod] = useState<string>("Get");
   const [url, setUrl] = useState<string>(serverUrl);
@@ -441,7 +443,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
                 {responseBodyText && (
                   <CopyButton
                     value={responseBodyText}
-                    label="Copy response body"
+                    label={intl.formatMessage({ id: "mcpServer.testConnection.copyResponseBody" })}
                     className="absolute right-2 top-2 size-6 bg-background/80 text-muted-foreground backdrop-blur-sm hover:bg-muted hover:text-foreground"
                   />
                 )}

src/components/tools/ToolSchemaDialog.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render } from "@/test/test-utils";
 import { ToolSchemaDialog } from "./ToolSchemaDialog";
@@ -261,6 +261,37 @@ describe("ToolSchemaDialog", () => {
     expect(screen.getByText(/array/)).toBeInTheDocument();
   });
 
+  it("moves initial focus to the footer Close button, not a schema copy button", async () => {
+    const tool = createMockTool();
+    render(<ToolSchemaDialog tool={tool} open={true} onOpenChange={mockOnOpenChange} />);
+
+    await waitFor(() => {
+      const allClose = screen.getAllByRole("button", { name: /close/i });
+      const footerClose = allClose.find((btn) => !btn.querySelector("svg"))!;
+      expect(footerClose).toHaveFocus();
+    });
+  });
+
+  it("closes on a single Escape press instead of dismissing a copy button tooltip first", async () => {
+    const user = userEvent.setup();
+    const tool = createMockTool();
+    render(<ToolSchemaDialog tool={tool} open={true} onOpenChange={mockOnOpenChange} />);
+
+    // Wait for the auto-focus redirect to land on Close before pressing Escape,
+    // otherwise focus may still be mid-transition from the default (a copy
+    // button), which is exactly the regression this guards against.
+    await waitFor(() => {
+      const allClose = screen.getAllByRole("button", { name: /close/i });
+      const footerClose = allClose.find((btn) => !btn.querySelector("svg"))!;
+      expect(footerClose).toHaveFocus();
+    });
+
+    await user.keyboard("{Escape}");
+
+    expect(mockOnOpenChange).toHaveBeenCalledTimes(1);
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+
   it("handles schemas with long text values", () => {
     const tool = createMockTool({
       inputSchema: {

src/components/tools/ToolSchemaDialog.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import { Code } from "lucide-react";
+import { useIntl } from "react-intl";
 import {
   Dialog,
   DialogContent,
@@ -26,6 +27,7 @@ function SchemaSection({
   title: string;
   schema: Record<string, unknown> | null | undefined;
 }) {
+  const intl = useIntl();
   const schemaText = schema ? JSON.stringify(schema, null, 2) : "{}";
 
   return (
@@ -39,7 +41,7 @@ function SchemaSection({
         </pre>
         <CopyButton
           value={schemaText}
-          label={`Copy ${title.toLowerCase()}`}
+          label={intl.formatMessage({ id: "common.copyValue" }, { label: title.toLowerCase() })}
           className="absolute right-2 top-2 size-6 bg-neutral-800/80 text-neutral-400 hover:bg-neutral-700 hover:text-neutral-100"
         />
       </div>

src/hooks/useCopyToClipboard.test.ts

@@ -11,6 +11,17 @@ function setClipboard(writeText: (value: string) => Promise<void>) {
   });
 }
 
+/** A promise plus its resolver/rejecter, so a test can control exactly when it settles. */
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
 describe("useCopyToClipboard", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -90,4 +101,61 @@ describe("useCopyToClipboard", () => {
     unmount();
     expect(clearTimeoutSpy).toHaveBeenCalled();
   });
+
+  it("does not let a stale request clobber a newer one that already settled", async () => {
+    const first = deferred<void>();
+    const second = deferred<void>();
+    let call = 0;
+    setClipboard(() => {
+      call += 1;
+      return call === 1 ? first.promise : second.promise;
+    });
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    let firstCopy!: Promise<boolean>;
+    let secondCopy!: Promise<boolean>;
+    act(() => {
+      firstCopy = result.current.copy("first");
+    });
+    act(() => {
+      secondCopy = result.current.copy("second");
+    });
+
+    // The newer (second) request resolves first...
+    second.resolve();
+    await act(async () => {
+      await secondCopy;
+    });
+    expect(result.current.status).toBe("copied");
+
+    // ...and the older (first) request rejects after it. Since it's stale it
+    // must be ignored rather than flipping status to "error".
+    first.reject(new Error("denied"));
+    await act(async () => {
+      await firstCopy;
+    });
+    expect(result.current.status).toBe("copied");
+  });
+
+  it("ignores a completion that arrives after unmount", async () => {
+    const { promise, resolve } = deferred<void>();
+    setClipboard(() => promise);
+    const setTimeoutSpy = vi.spyOn(window, "setTimeout");
+    const { result, unmount } = renderHook(() => useCopyToClipboard());
+
+    let copyPromise!: Promise<boolean>;
+    act(() => {
+      copyPromise = result.current.copy("value");
+    });
+
+    unmount();
+    resolve();
+    await act(async () => {
+      await copyPromise;
+    });
+
+    // The write finished after teardown, so no state update or reset timer
+    // should have been scheduled.
+    expect(setTimeoutSpy).not.toHaveBeenCalled();
+  });
 });

src/hooks/useCopyToClipboard.ts

@@ -12,17 +12,28 @@ export type CopyStatus = "idle" | "copied" | "error";
 export function useCopyToClipboard(resetDelayMs = 1500) {
   const [status, setStatus] = useState<CopyStatus>("idle");
   const timeoutRef = useRef<number | null>(null);
+  const mountedRef = useRef(true);
+  const requestIdRef = useRef(0);
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
       if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
+    };
+  }, []);
 
   const copy = useCallback(
     async (value: string) => {
+      const requestId = ++requestIdRef.current;
       const ok = await copyToClipboard(value);
+
+      // Ignore this result if a later copy() has since been fired (so an
+      // older request resolving out of order can't clobber newer feedback)
+      // or the component has unmounted (so we don't set state or schedule
+      // an uncleared timer after teardown).
+      if (!mountedRef.current || requestId !== requestIdRef.current) return ok;
+
       setStatus(ok ? "copied" : "error");
       if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {

src/i18n/locales/en-US/mcpServer.json

@@ -175,5 +175,6 @@
   "mcpServer.caCert.hint": "Public certificate files only (.pem, .crt, .cer, .cert)",
   "mcpServer.caCert.invalidFiles": "{count, plural, one {Invalid file type: {files}.} other {Invalid file types: {files}.}} Only .pem, .crt, .cer, .cert files are allowed.",
   "mcpServer.caCert.filesSelected": "{count, plural, one {# file selected successfully.} other {# files selected successfully.}}",
-  "mcpServer.caCert.selected": "Selected: {files}"
+  "mcpServer.caCert.selected": "Selected: {files}",
+  "mcpServer.testConnection.copyResponseBody": "Copy response body"
 }

src/i18n/locales/es-ES/mcpServer.json

@@ -175,5 +175,6 @@
   "mcpServer.caCert.hint": "Solo archivos de certificado público (.pem, .crt, .cer, .cert)",
   "mcpServer.caCert.invalidFiles": "{count, plural, one {Tipo de archivo no válido: {files}.} other {Tipos de archivo no válidos: {files}.}} Solo se permiten archivos .pem, .crt, .cer y .cert.",
   "mcpServer.caCert.filesSelected": "{count, plural, one {# archivo seleccionado correctamente.} other {# archivos seleccionados correctamente.}}",
-  "mcpServer.caCert.selected": "Seleccionados: {files}"
+  "mcpServer.caCert.selected": "Seleccionados: {files}",
+  "mcpServer.testConnection.copyResponseBody": "Copiar cuerpo de la respuesta"
 }