@stigmer/react 3.12.1 → 3.12.3

package/src/manifest/ApplyManifestDialog.tsx

@@ -2,6 +2,7 @@
 
 import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { toast } from "../feedback/toast.js";
 import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
 import {
@@ -71,22 +72,10 @@ export function ApplyManifestDialog({
   org,
   onApplied,
 }: ApplyManifestDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const manifest = useApplyManifest(org);
   const { reset } = manifest;
 
-  // Sync dialog open state with the native <dialog> element.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
   // Start each session clean.
   useEffect(() => {
     if (open) {
@@ -109,10 +98,11 @@ export function ApplyManifestDialog({
     if (applied.length > 0) onApplied?.(applied);
   }, [onOpenChange, manifest.entries, onApplied]);
 
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      closeAndMaybeRefresh();
+  // Escape/cancel routes through the same dismiss-after-partial path as the
+  // Close button, via the shell's single close-intent callback.
+  const handleShellOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) closeAndMaybeRefresh();
     },
     [closeAndMaybeRefresh],
   );
@@ -151,15 +141,7 @@ export function ApplyManifestDialog({
     !manifest.isApplying;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open={open} onOpenChange={handleShellOpenChange} width="3xl" aria-label="Apply YAML">
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         {/* Header */}
         <div className="stg:flex stg:flex-col stg:gap-1">
@@ -252,7 +234,7 @@ export function ApplyManifestDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/manifest/EditResourceYamlDialog.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
+import { lazy, Suspense, useCallback, useEffect } from "react";
 import type { Message } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { getUserMessage, type AppliedManifest } from "@stigmer/sdk";
 import { toast } from "../feedback/toast.js";
 import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
@@ -67,34 +68,14 @@ export function EditResourceYamlDialog({
   resource,
   onApplied,
 }: EditResourceYamlDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const edit = useEditResourceYaml({ resource });
   const { reset } = edit;
 
-  // Sync dialog open state with the native <dialog> element.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
   // Discard stale edits from a previous session when the dialog opens.
   useEffect(() => {
     if (open) reset();
   }, [open, reset]);
 
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
   const handleApply = useCallback(async () => {
     try {
       const result = await edit.apply();
@@ -111,15 +92,7 @@ export function EditResourceYamlDialog({
     edit.validation.status === "valid" && edit.isDirty && !edit.isApplying;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open={open} onOpenChange={onOpenChange} width="3xl" aria-label="Edit YAML">
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         {/* Header */}
         <div className="stg:flex stg:flex-col stg:gap-1">
@@ -233,7 +206,7 @@ export function EditResourceYamlDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/mcp-server/DefinitionDriftNotice.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import type { McpServerDefinitionDrift } from "./useMcpServerDefinitionDrift.js";
+import type { DriftFieldId } from "./internal/definitionDrift.js";
+
+/** Props for {@link DefinitionDriftNotice}. */
+export interface DefinitionDriftNoticeProps {
+  /**
+   * The detected drift from {@link useMcpServerDefinitionDrift}, or
+   * `null`. The notice renders `null` when there is no drift.
+   */
+  readonly drift: McpServerDefinitionDrift | null;
+  /** Applies the marketplace configuration and re-runs discovery. */
+  readonly onRefresh: () => void;
+  /** `true` while the refresh (update + re-discovery) is in flight. */
+  readonly isRefreshing: boolean;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/** Human-readable labels for the drifted field groups. */
+const DRIFT_FIELD_LABELS: Record<DriftFieldId, string> = {
+  transport: "connection type",
+  endpoint: "endpoint URL",
+  headers: "request headers",
+  queryParams: "query parameters",
+  timeout: "request timeout",
+  command: "launch command",
+  workingDirectory: "working directory",
+  environmentVariables: "environment variables",
+  authentication: "authentication",
+};
+
+/**
+ * Tells the owner of an org-owned MCP server that its connection-defining
+ * configuration differs from the current marketplace definition, and
+ * offers a one-click refresh (stigmer/stigmer#228).
+ *
+ * Without this notice, a server copied before a template fix is stranded
+ * forever: the user sees only downstream symptoms ("Token expired", 401s)
+ * with no indication that the root cause is a stale definition and no
+ * recovery path short of hand-editing YAML. This surfaces the actual
+ * state and pairs it with the action that fixes it (Nielsen: visibility
+ * of system status; error recovery).
+ *
+ * The copy says the configuration **differs** — never "was updated" —
+ * because the marketplace counterpart is matched by slug, and a
+ * hand-made server that happens to share a marketplace name must not be
+ * told a false history. Naming the differing fields keeps the claim
+ * verifiable, and the refresh explicitly promises what it preserves.
+ *
+ * Self-gating: renders `null` unless drift was detected. Callers render
+ * it unconditionally next to the other connection notices, mirroring
+ * {@link OAuthRequiredNotice}.
+ *
+ * All visual properties flow through `--stgm-*` design tokens. No
+ * Console-specific dependencies — safe for platform-builder embedding.
+ */
+export function DefinitionDriftNotice({
+  drift,
+  onRefresh,
+  isRefreshing,
+  className,
+}: DefinitionDriftNoticeProps) {
+  if (!drift) return null;
+
+  const fieldList = drift.changedFields
+    .map((id) => DRIFT_FIELD_LABELS[id])
+    .join(", ");
+
+  return (
+    <div
+      role="status"
+      className={cn(
+        "stg:bg-muted-subtle stg:text-muted-foreground stg:flex stg:items-start stg:gap-2.5 stg:rounded-lg stg:border stg:border-transparent stg:px-4 stg:py-3",
+        className,
+      )}
+    >
+      <RefreshIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+      <div className="stg:flex-1">
+        <p className="stg:text-xs stg:leading-relaxed">
+          This server&apos;s configuration differs from the current
+          marketplace definition ({fieldList}). Refreshing applies the
+          marketplace configuration and re-runs discovery — your enabled
+          tools and approval pins are kept.
+        </p>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={isRefreshing}
+          data-cursor-target="definition-drift-refresh"
+          className="stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover stg:mt-2 stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-[11px] stg:font-medium stg:disabled:opacity-60"
+        >
+          {isRefreshing ? "Refreshing…" : "Refresh configuration"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function RefreshIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M13.5 8a5.5 5.5 0 1 1-1.61-3.89" />
+      <path d="M13.5 2v3h-3" />
+    </svg>
+  );
+}

package/src/mcp-server/McpServerConnectDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { EnvVarInput } from "@stigmer/sdk";
 import { useMcpServer } from "./useMcpServer.js";
 import { useMcpServerCredentials } from "./useMcpServerCredentials.js";
@@ -88,29 +89,11 @@ export function McpServerConnectDialog({
   onOpenDetails,
   className,
 }: McpServerConnectDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const resolvedOrg = activeOrg || org;
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleDialogClose = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onClose();
-      }
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
@@ -118,15 +101,18 @@ export function McpServerConnectDialog({
   if (!open) return null;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleDialogClose}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open
+      onOpenChange={handleOpenChange}
+      width="md"
+      dismissOnBackdrop
+      // Card surface + visible overflow are deliberate: the connect form
+      // hosts popovers that extend past the dialog bounds.
       className={cn(
-        "stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-md stg:overflow-visible stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-0 stg:text-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:max-h-[85vh] stg:overflow-visible stg:bg-card stg:text-foreground",
         className,
       )}
+      aria-label={`Connect ${slug}`}
     >
       <div
         className="stg:flex stg:max-h-[85vh] stg:flex-col stg:overflow-y-auto stg:p-6"
@@ -141,7 +127,7 @@ export function McpServerConnectDialog({
           onOpenDetails={onOpenDetails}
         />
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/mcp-server/McpServerDetailView.tsx

@@ -27,12 +27,16 @@ import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect.js";
 import { StdioSandboxNotice } from "./StdioSandboxNotice.js";
 import { OAuthRequiredNotice } from "./OAuthRequiredNotice.js";
 import { VendorApprovalBlockedNotice } from "./VendorApprovalBlockedNotice.js";
+import { DefinitionDriftNotice } from "./DefinitionDriftNotice.js";
+import { useMcpServerDefinitionDrift } from "./useMcpServerDefinitionDrift.js";
+import { buildRefreshInput } from "./internal/definitionDrift.js";
 import { useDisconnectOAuth } from "./useDisconnectOAuth.js";
 import { useOrgOAuthApp } from "./useOrgOAuthApp.js";
 import { OAuthAppForm } from "./OAuthAppForm.js";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { ErrorMessage } from "../error/ErrorMessage.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { DialogShell } from "../internal/DialogShell.js";
 import { EnvVarForm } from "../environment/EnvVarForm.js";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
@@ -226,6 +230,50 @@ export function McpServerDetailView({
   const credentials = useMcpServerCredentials(activeOrg ?? org, mcpServer ?? null);
   const connection = useMcpServerConnect();
   const oauth = useMcpServerOAuthConnect();
+
+  // Definition drift is only checked for editable servers: the paired
+  // refresh writes to the resource, so read-only viewers (e.g. anyone
+  // browsing another org's marketplace row) have nothing to act on.
+  const { drift: definitionDrift } = useMcpServerDefinitionDrift(
+    editable ? (mcpServer ?? null) : null,
+  );
+  const [isRefreshingDefinition, setIsRefreshingDefinition] = useState(false);
+  const handleDefinitionRefresh = useCallback(async () => {
+    if (!mcpServer?.metadata?.id || !definitionDrift) return;
+    setIsRefreshingDefinition(true);
+    try {
+      const updated = await updateMcpServer(
+        buildRefreshInput(mcpServer, definitionDrift.template),
+      );
+      onResourceUpdated?.(updated);
+      // The update RPC does not re-run discovery (only apply does), so
+      // reconnect explicitly — the refreshed transport/auth configuration
+      // is exactly what discovery needs to be retried against.
+      const envKeys = Object.keys(updated.spec?.env ?? {});
+      await connection.connect(
+        updated.metadata!.id,
+        activeOrg ?? org,
+        undefined,
+        envKeys,
+      );
+    } catch {
+      // Update errors surface through useUpdateMcpServer's error state;
+      // a failed re-discovery lands in connection.error next to the
+      // Connect button. Either way the page stays usable.
+    } finally {
+      setIsRefreshingDefinition(false);
+      refetch();
+    }
+  }, [
+    mcpServer,
+    definitionDrift,
+    updateMcpServer,
+    onResourceUpdated,
+    connection,
+    activeOrg,
+    org,
+    refetch,
+  ]);
   const disconnectOAuth = useDisconnectOAuth();
   const orgOAuthApp = useOrgOAuthApp(
     mcpServer?.metadata?.id ?? null,
@@ -235,7 +283,6 @@ export function McpServerDetailView({
   const [showCredentialForm, setShowCredentialForm] = useState(defaultShowCredentialForm);
   const [showByoaForm, setShowByoaForm] = useState(false);
   const [capabilityTab, setCapabilityTab] = useState<CapabilityTab>(defaultCapabilityTab);
-  const byoaDialogRef = useRef<HTMLDialogElement>(null);
 
   const onResourceLoadRef = useRef(onResourceLoad);
   onResourceLoadRef.current = onResourceLoad;
@@ -341,20 +388,9 @@ export function McpServerDetailView({
     }
   }, [mcpServer, disconnectOAuth, credentials, refetch, activeOrg, org]);
 
-  // BYOA dialog lifecycle — native <dialog> toggle
-  useEffect(() => {
-    const dialog = byoaDialogRef.current;
-    if (!dialog) return;
-    if (showByoaForm && !dialog.open) {
-      dialog.showModal();
-    } else if (!showByoaForm && dialog.open) {
-      dialog.close();
-    }
-  }, [showByoaForm]);
-
-  const handleByoaDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
+  const handleByoaOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen) return;
       setShowByoaForm(false);
       orgOAuthApp.clearErrors();
     },
@@ -588,6 +624,12 @@ export function McpServerDetailView({
       {/* scrollTarget: guided tours/demos bring the connect flow into view
           (see IdentityTransportStep's "mcp-transport" for the convention). */}
       <Section title="Connection" scrollTarget="mcp-connection">
+        <DefinitionDriftNotice
+          drift={definitionDrift}
+          onRefresh={handleDefinitionRefresh}
+          isRefreshing={isRefreshingDefinition}
+          className="stg:mb-3"
+        />
         <StdioSandboxNotice serverType={spec?.serverType} className="stg:mb-3" />
         <OAuthRequiredNotice oauthOnly={spec?.auth?.oauthOnly} className="stg:mb-3" />
         <ConnectBar
@@ -653,14 +695,13 @@ export function McpServerDetailView({
         )}
       </Section>
 
-      {/* BYOA dialog — native <dialog> for zero-dependency modal behavior */}
-      <dialog
-        ref={byoaDialogRef}
-        onCancel={handleByoaDialogCancel}
-        className={cn(
-          "stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-6 stg:shadow-lg",
-          "stg:backdrop:bg-black/50",
-        )}
+      {/* BYOA dialog */}
+      <DialogShell
+        open={showByoaForm}
+        onOpenChange={handleByoaOpenChange}
+        width="md"
+        className="stg:p-6"
+        aria-label="Use your own OAuth app"
       >
         <h3 className="stg:mb-4 stg:text-base stg:font-semibold stg:text-foreground">
           Use your own OAuth app
@@ -676,7 +717,7 @@ export function McpServerDetailView({
           isSubmitting={orgOAuthApp.isSetting}
           error={orgOAuthApp.setError}
         />
-      </dialog>
+      </DialogShell>
 
       <Section title="Capabilities" scrollTarget="mcp-capabilities">
         <Tabs
@@ -710,7 +751,7 @@ export function McpServerDetailView({
       </Section>
 
       {(editable || (spec && spec.tags.length > 0)) && (
-        <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
+        <TagsSection tags={spec?.tags ?? []} editable={editable} />
       )}
     </ResourceDetailShell>
     {access.dialog}
@@ -1836,34 +1877,13 @@ function EnvSection({
 function TagsSection({
   tags,
   editable,
-  isSaving,
-  saveMcpField,
 }: {
   readonly tags: readonly string[];
   readonly editable?: boolean;
-  readonly isSaving?: boolean;
-  readonly saveMcpField?: <K extends keyof import("@stigmer/sdk").McpServerInput>(
-    field: K,
-    value: import("@stigmer/sdk").McpServerInput[K],
-  ) => Promise<boolean>;
 }) {
-  const tagRows: KeyValueRow[] = useMemo(
-    () => tags.map((t) => ({ key: t, value: "" })),
-    [tags],
-  );
-
-  const handleTagsSave = useCallback(
-    async (rows: KeyValueRow[]) => {
-      if (!saveMcpField) return false;
-      // Tags are stored as string[] on the spec but not directly on McpServerInput.
-      // For now, save them through the full input by modifying the spec.
-      // Tags don't have a direct field on McpServerInput, so we handle this at
-      // a higher level if needed. For now, show read-only in edit mode.
-      return false;
-    },
-    [saveMcpField],
-  );
-
+  // Display-only by design: tags are curated marketplace categorization,
+  // not per-connection state. (McpServerInput does carry `tags`, so an
+  // editing affordance is unblocked if the product ever wants one.)
   return (
     <Section title="Tags" count={tags.length}>
       <div className="stg:flex stg:flex-wrap stg:gap-1.5 stg:p-3">

package/src/mcp-server/OAuthAppForm.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link OAuthAppForm}. */
 export interface OAuthAppFormProps {
@@ -214,7 +215,7 @@ export function OAuthAppForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isSubmitting && <SpinnerIcon />}
+          {isSubmitting && <SpinnerIcon size={12} />}
           Save
         </button>
       </div>
@@ -285,20 +286,3 @@ function EyeOffIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/mcp-server/__tests__/DefinitionDriftNotice.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { samples } from "../../test/samples";
+import { DefinitionDriftNotice } from "../DefinitionDriftNotice";
+import type { McpServerDefinitionDrift } from "../useMcpServerDefinitionDrift";
+
+afterEach(cleanup);
+
+function drift(): McpServerDefinitionDrift {
+  return {
+    template: samples.mcpServer({ name: "Monday", org: "stigmer", slug: "monday" }),
+    changedFields: ["headers", "authentication"],
+  };
+}
+
+describe("DefinitionDriftNotice", () => {
+  it("renders null when there is no drift", () => {
+    const { container } = render(
+      <DefinitionDriftNotice drift={null} onRefresh={() => {}} isRefreshing={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("says the configuration DIFFERS (never 'was updated') and names the fields", () => {
+    render(
+      <DefinitionDriftNotice drift={drift()} onRefresh={() => {}} isRefreshing={false} />,
+    );
+    const notice = screen.getByRole("status");
+    // Honest copy: slug-matching is a heuristic, so the notice must state
+    // a verifiable present-tense fact, not invent an update history.
+    expect(notice.textContent).toContain("differs from the current marketplace definition");
+    expect(notice.textContent).not.toContain("was updated");
+    expect(notice.textContent).toContain("request headers, authentication");
+    // The refresh promise: what survives.
+    expect(notice.textContent).toContain("enabled tools and approval pins are kept");
+  });
+
+  it("fires onRefresh from the action button", async () => {
+    const onRefresh = vi.fn();
+    render(
+      <DefinitionDriftNotice drift={drift()} onRefresh={onRefresh} isRefreshing={false} />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Refresh configuration" }));
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("disables the button and shows progress while refreshing", () => {
+    render(
+      <DefinitionDriftNotice drift={drift()} onRefresh={() => {}} isRefreshing />,
+    );
+    const button = screen.getByRole<HTMLButtonElement>("button", {
+      name: "Refreshing…",
+    });
+    expect(button.disabled).toBe(true);
+  });
+});