From 0958e672ae6a87274be75bd47f13595da1ce3a78 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 23 Sep 2026 18:31:43 -0700
Subject: [PATCH 1/9] feat: show catalog add failures on the card that failed

Extracts the presentational shell of ServerStatusIndicator so the catalog
card can reuse the icon, muted label and popover without inheriting the
server availability model.

Open-auth add failures now render an error indicator in the card footer
next to Add, with the reason in a popover, instead of a notification above
the grid that pushed the cards down. The failures that have no card left
to carry them, and every other action outcome, still use the page stack.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../server-catalog/CatalogResults.tsx         | 23 +++++
 .../servers/ServerStatusIndicator.tsx         | 77 +++++++---------
 src/components/ui/status-indicator.test.tsx   | 65 ++++++++++++++
 src/components/ui/status-indicator.tsx        | 87 +++++++++++++++++++
 src/i18n/locales/en-US/mcpServer.json         |  4 +
 src/i18n/locales/es-ES/mcpServer.json         |  4 +
 src/i18n/locales/pt-BR/mcpServer.json         |  4 +
 src/pages/ServerCatalog.test.tsx              | 57 ++++++++++--
 src/pages/ServerCatalog.tsx                   | 58 ++++++++++---
 9 files changed, 316 insertions(+), 63 deletions(-)
 create mode 100644 src/components/ui/status-indicator.test.tsx
 create mode 100644 src/components/ui/status-indicator.tsx

diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 7d47fdb2..171359f8 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -23,6 +23,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { StatusIndicator } from "@/components/ui/status-indicator";
 import type { CatalogServer } from "@/generated/types";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { getAuthTypeGroupId, getAuthTypeGroupLabelId } from "@/utils/catalogAuthTypes";
@@ -30,6 +31,7 @@ import { getTagLabels } from "@/utils/tags";
 
 const EMPTY_PENDING_IDS: ReadonlySet<string> = new Set();
 const EMPTY_OAUTH_STATUSES: Readonly<Record<string, OAuthGatewayStatus>> = {};
+const EMPTY_ADD_ERRORS: Readonly<Record<string, string>> = {};
 
 function getOAuthCardState(server: CatalogServer, status?: OAuthGatewayStatus) {
   const tokenState = status?.user_token_status?.status;
@@ -77,6 +79,7 @@ function CatalogCard({
   canTest,
   canDisconnect,
   oauthStatuses,
+  addError,
 }: {
   server: CatalogServer;
   onView: (trigger: HTMLElement) => void;
@@ -90,6 +93,8 @@ function CatalogCard({
   canTest: boolean;
   canDisconnect: boolean;
   oauthStatuses?: Readonly<Record<string, OAuthGatewayStatus>>;
+  /** Why the last add attempt failed, resolved to the server's reason or the fallback. */
+  addError?: string;
 }) {
   const intl = useIntl();
   const headingId = useId();
@@ -278,6 +283,21 @@ function CatalogCard({
                   <FileText className="size-4 text-muted-foreground" aria-hidden="true" />
                 </Button>
               )}
+
+              {!server.is_registered && addError && !isAdding && (
+                <StatusIndicator
+                  Icon={STATUS_ICON.error}
+                  iconClassName={STATUS_TONE_CLASS.error}
+                  label={intl.formatMessage({ id: "mcpServer.catalog.addFailed.short" })}
+                  fullLabel={intl.formatMessage({ id: "mcpServer.catalog.addFailed.label" })}
+                  triggerAriaLabel={intl.formatMessage(
+                    { id: "mcpServer.catalog.addFailed.trigger" },
+                    { name: server.name },
+                  )}
+                >
+                  <p className="break-words text-sm text-foreground">{addError}</p>
+                </StatusIndicator>
+              )}
             </div>
           </CardContent>
         </article>
@@ -375,6 +395,7 @@ export function CatalogResults({
   canTest,
   canDisconnect,
   oauthStatuses = EMPTY_OAUTH_STATUSES,
+  addErrors = EMPTY_ADD_ERRORS,
 }: {
   servers: CatalogServer[];
   emptyStateMessageId: string;
@@ -389,6 +410,7 @@ export function CatalogResults({
   canTest: boolean;
   canDisconnect: boolean;
   oauthStatuses?: Readonly<Record<string, OAuthGatewayStatus>>;
+  addErrors?: Readonly<Record<string, string>>;
 }) {
   const intl = useIntl();
   const announcedCount = useDebouncedValue(servers.length, 300);
@@ -418,6 +440,7 @@ export function CatalogResults({
               canTest={canTest}
               canDisconnect={canDisconnect}
               oauthStatuses={oauthStatuses}
+              addError={addErrors[server.id]}
             />
           ))}
         </ul>
diff --git a/src/components/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index 99cebf06..7116f6e2 100644
--- a/src/components/servers/ServerStatusIndicator.tsx
+++ b/src/components/servers/ServerStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
 
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { StatusIndicator } from "@/components/ui/status-indicator";
 import { cn } from "@/lib/utils";
 import {
   getAvailabilityPresentation,
@@ -61,32 +61,18 @@ export function ServerStatusIndicator({
   const fullLabel = intl.formatMessage({ id: presentation.labelId });
   const isAbbreviated = compact && presentation.shortLabelId !== presentation.labelId;
 
-  const icon = (
-    <StatusIcon
-      className={cn("h-3.5 w-3.5 shrink-0", presentation.iconClassName)}
-      aria-hidden="true"
-      focusable="false"
-    />
-  );
-
-  const content = (
-    <>
-      {icon}
-      <span className="text-muted-foreground" aria-hidden={isAbbreviated || undefined}>
-        {label}
-      </span>
-      {isAbbreviated && <span className="sr-only">{fullLabel}</span>}
-    </>
-  );
-  const layout = "inline-flex items-center gap-1.5 text-xs";
-  const trigger =
-    "rounded hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
-
-  if (!interactive) {
-    return <span className={cn(layout, className)}>{content}</span>;
-  }
+  if (interactive && authorize) {
+    const layout = "inline-flex items-center gap-1.5 text-xs";
+    const trigger =
+      "rounded hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+    const icon = (
+      <StatusIcon
+        className={cn("h-3.5 w-3.5 shrink-0", presentation.iconClassName)}
+        aria-hidden="true"
+        focusable="false"
+      />
+    );
 
-  if (authorize) {
     const runAuthorize = async () => {
       setIsAuthorizing(true);
       try {
@@ -119,25 +105,24 @@ export function ServerStatusIndicator({
   }
 
   return (
-    <Popover>
-      <PopoverTrigger
-        type="button"
-        aria-label={intl.formatMessage(
-          { id: "mcpServer.status.trigger" },
-          { name: server.name, status: fullLabel },
-        )}
-        className={cn(layout, trigger, className)}
-      >
-        {content}
-      </PopoverTrigger>
-      <PopoverContent align="end" className="w-auto max-w-xs p-3">
-        <ServerStatusDetail
-          availability={availability}
-          enabled={server.enabled}
-          lastSeen={server.lastSeen}
-          lastError={server.lastError}
-        />
-      </PopoverContent>
-    </Popover>
+    <StatusIndicator
+      Icon={StatusIcon}
+      iconClassName={presentation.iconClassName}
+      label={label}
+      fullLabel={isAbbreviated ? fullLabel : undefined}
+      triggerAriaLabel={intl.formatMessage(
+        { id: "mcpServer.status.trigger" },
+        { name: server.name, status: fullLabel },
+      )}
+      interactive={interactive}
+      className={className}
+    >
+      <ServerStatusDetail
+        availability={availability}
+        enabled={server.enabled}
+        lastSeen={server.lastSeen}
+        lastError={server.lastError}
+      />
+    </StatusIndicator>
   );
 }
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
new file mode 100644
index 00000000..d10fd0fc
--- /dev/null
+++ b/src/components/ui/status-indicator.test.tsx
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { OctagonXIcon } from "lucide-react";
+
+import { renderWithProviders, screen } from "@/test/test-utils";
+import { StatusIndicator } from "./status-indicator";
+
+const props = {
+  Icon: OctagonXIcon,
+  iconClassName: "text-destructive",
+  label: "Error",
+};
+
+describe("StatusIndicator", () => {
+  it("opens its popover on click", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <StatusIndicator {...props} triggerAriaLabel="Show details">
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show details" }));
+
+    expect(await screen.findByText("Unable to add this server.")).toBeVisible();
+  });
+
+  it("announces the full label where the visible one is abbreviated", () => {
+    renderWithProviders(
+      <StatusIndicator {...props} fullLabel="Error adding server" triggerAriaLabel="Show details">
+        <p>Detail</p>
+      </StatusIndicator>,
+    );
+
+    expect(screen.getByText("Error")).toHaveAttribute("aria-hidden", "true");
+    expect(screen.getByText("Error adding server")).toBeInTheDocument();
+  });
+
+  it("leaves the label announced where it is not abbreviated", () => {
+    renderWithProviders(
+      <StatusIndicator {...props} fullLabel="Error" triggerAriaLabel="Show details">
+        <p>Detail</p>
+      </StatusIndicator>,
+    );
+
+    expect(screen.getByText("Error")).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("renders as plain text where a button cannot nest", () => {
+    renderWithProviders(
+      <StatusIndicator {...props} interactive={false}>
+        <p>Detail</p>
+      </StatusIndicator>,
+    );
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("renders as plain text with nothing to explain", () => {
+    renderWithProviders(<StatusIndicator {...props} />);
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
new file mode 100644
index 00000000..50b833ee
--- /dev/null
+++ b/src/components/ui/status-indicator.tsx
@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface StatusIndicatorProps {
+  Icon: LucideIcon;
+  /** Applies to the icon only; the label always stays muted. */
+  iconClassName: string;
+  /** The visible label. Pass the abbreviated form where the column is narrow. */
+  label: string;
+  /** The unabbreviated label, announced in place of `label` when the two differ. */
+  fullLabel?: string;
+  /** Accessible name for the trigger. Required wherever `children` are given. */
+  triggerAriaLabel?: string;
+  size?: "xs" | "sm";
+  /** Render as plain text rather than a button. Required inside another button. */
+  interactive?: boolean;
+  /** Popover contents. Without them the indicator has nothing to open and stays plain text. */
+  children?: ReactNode;
+  className?: string;
+}
+
+const SIZE_CLASS = {
+  xs: "text-xs",
+  sm: "text-sm",
+} as const;
+
+/**
+ * Status icon and label, optionally opening a popover that explains the state.
+ *
+ * Presentation only: callers classify their own subject and pass the icon, tone
+ * and copy. Consumers are the MCP server status indicator, the catalog card and
+ * the source picker, which share this shape but not their state models.
+ */
+export function StatusIndicator({
+  Icon,
+  iconClassName,
+  label,
+  fullLabel,
+  triggerAriaLabel,
+  size = "xs",
+  interactive = true,
+  children,
+  className,
+}: StatusIndicatorProps) {
+  const isAbbreviated = Boolean(fullLabel && fullLabel !== label);
+  const layout = cn("inline-flex items-center gap-1.5", SIZE_CLASS[size]);
+
+  const content = (
+    <>
+      <Icon
+        className={cn("h-3.5 w-3.5 shrink-0", iconClassName)}
+        aria-hidden="true"
+        focusable="false"
+      />
+      <span className="text-muted-foreground" aria-hidden={isAbbreviated || undefined}>
+        {label}
+      </span>
+      {isAbbreviated && <span className="sr-only">{fullLabel}</span>}
+    </>
+  );
+
+  if (!interactive || !children) {
+    return <span className={cn(layout, className)}>{content}</span>;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        type="button"
+        aria-label={triggerAriaLabel}
+        className={cn(
+          layout,
+          "rounded hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className,
+        )}
+      >
+        {content}
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-auto max-w-xs p-3">
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/i18n/locales/en-US/mcpServer.json b/src/i18n/locales/en-US/mcpServer.json
index 98c87958..9fa49d83 100644
--- a/src/i18n/locales/en-US/mcpServer.json
+++ b/src/i18n/locales/en-US/mcpServer.json
@@ -157,6 +157,10 @@
   "mcpServer.catalog.oauth.authorizationError": "OAuth authorization could not be completed. Try again.",
   "mcpServer.catalog.oauth.authorizedToolsPending": "{name} is authorized, but tools could not be fetched. Try again from the server actions.",
   "mcpServer.catalog.addError": "Unable to add this server. Try again.",
+  "mcpServer.catalog.addFailed.short": "Error",
+  "mcpServer.catalog.addFailed.label": "Error adding server",
+  "mcpServer.catalog.addFailed.trigger": "{name} status: error adding server. Show details",
+  "mcpServer.catalog.addFailed.announcement": "Error adding {name}",
   "mcpServer.catalog.addNotFound": "{name} is no longer available in the catalog.",
   "mcpServer.catalog.alreadyConnected": "{name} is already connected.",
   "mcpServer.catalog.actionsFor": "Actions for {name}",
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index f733ca1e..79a0e543 100644
--- a/src/i18n/locales/es-ES/mcpServer.json
+++ b/src/i18n/locales/es-ES/mcpServer.json
@@ -157,6 +157,10 @@
   "mcpServer.catalog.oauth.authorizationError": "No se pudo completar la autorización OAuth. Inténtalo de nuevo.",
   "mcpServer.catalog.oauth.authorizedToolsPending": "{name} está autorizado, pero no se pudieron obtener las herramientas. Inténtalo de nuevo desde las acciones del servidor.",
   "mcpServer.catalog.addError": "No se pudo añadir este servidor. Inténtalo de nuevo.",
+  "mcpServer.catalog.addFailed.short": "Error",
+  "mcpServer.catalog.addFailed.label": "Error al añadir el servidor",
+  "mcpServer.catalog.addFailed.trigger": "Estado de {name}: error al añadir el servidor. Ver detalles",
+  "mcpServer.catalog.addFailed.announcement": "Error al añadir {name}",
   "mcpServer.catalog.addNotFound": "{name} ya no está disponible en el catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} ya está conectado.",
   "mcpServer.catalog.actionsFor": "Acciones para {name}",
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 46b60ee4..38b30d43 100644
--- a/src/i18n/locales/pt-BR/mcpServer.json
+++ b/src/i18n/locales/pt-BR/mcpServer.json
@@ -157,6 +157,10 @@
   "mcpServer.catalog.oauth.authorizationError": "Não foi possível concluir a autorização OAuth. Tente novamente.",
   "mcpServer.catalog.oauth.authorizedToolsPending": "{name} está autorizado, mas não foi possível buscar as ferramentas. Tente novamente pelas ações do servidor.",
   "mcpServer.catalog.addError": "Não foi possível adicionar este servidor. Tente novamente.",
+  "mcpServer.catalog.addFailed.short": "Erro",
+  "mcpServer.catalog.addFailed.label": "Erro ao adicionar o servidor",
+  "mcpServer.catalog.addFailed.trigger": "Status de {name}: erro ao adicionar o servidor. Ver detalhes",
+  "mcpServer.catalog.addFailed.announcement": "Erro ao adicionar {name}",
   "mcpServer.catalog.addNotFound": "{name} não está mais disponível no catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} já está conectado.",
   "mcpServer.catalog.actionsFor": "Ações para {name}",
diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index 8a976e2a..116d0388 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -544,7 +544,11 @@ describe("ServerCatalog", () => {
     await screen.findByText("Globalping connection failed with status 503 in 12 ms.");
 
     await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
-    expect(await screen.findByText("Unable to add this server. Try again.")).toBeVisible();
+    expect(
+      await screen.findByRole("button", {
+        name: "Public Notes status: error adding server. Show details",
+      }),
+    ).toBeVisible();
     expect(
       screen.getByText("Globalping connection failed with status 503 in 12 ms."),
     ).toBeVisible();
@@ -813,19 +817,62 @@ describe("ServerCatalog", () => {
     expect(screen.getAllByText("Connected")).toHaveLength(2);
   });
 
-  it("reports catalog registration failures", async () => {
+  it("reports catalog registration failures on the card that failed", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValue(new Error("network detail must not leak"));
     renderWithRouter(<ServerCatalog />);
 
     await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
 
-    expect(await screen.findByRole("alert")).toHaveTextContent(
-      "Unable to add this server. Try again.",
-    );
+    const indicator = await screen.findByRole("button", {
+      name: "Public Notes status: error adding server. Show details",
+    });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add Public Notes" })).toBeEnabled();
+
+    await user.click(indicator);
+
+    expect(await screen.findByText("Unable to add this server. Try again.")).toBeVisible();
     expect(screen.queryByText(/network detail/i)).not.toBeInTheDocument();
   });
 
+  it("announces an add failure the card indicator only shows silently", async () => {
+    const user = userEvent.setup();
+    mockRegisterCatalogServer.mockRejectedValue(new Error("network"));
+    renderWithRouter(<ServerCatalog />);
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+
+    const announcement = await screen.findByText("Error adding Public Notes");
+    expect(announcement).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("clears the card error when the add is retried", async () => {
+    const user = userEvent.setup();
+    mockRegisterCatalogServer.mockRejectedValueOnce(new Error("first attempt failed"));
+    renderWithRouter(<ServerCatalog />);
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    await screen.findByRole("button", {
+      name: "Public Notes status: error adding server. Show details",
+    });
+
+    mockRegisterCatalogServer.mockResolvedValue({
+      success: true,
+      message: "Registered",
+      server_id: "gw-public-notes",
+    });
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("button", {
+          name: "Public Notes status: error adding server. Show details",
+        }),
+      ).not.toBeInTheDocument(),
+    );
+  });
+
   it("registers an available server then refetches authoritative gateway state", async () => {
     const user = userEvent.setup();
     const refetch = vi.fn().mockResolvedValue(undefined);
diff --git a/src/pages/ServerCatalog.tsx b/src/pages/ServerCatalog.tsx
index 9d3d7c40..d0bfaa60 100644
--- a/src/pages/ServerCatalog.tsx
+++ b/src/pages/ServerCatalog.tsx
@@ -403,6 +403,8 @@ export function ServerCatalog() {
   const [registrationNotifications, setRegistrationNotifications] = useState<
     RegistrationNotification[]
   >([]);
+  const [addErrors, setAddErrors] = useState<Record<string, string>>({});
+  const [addErrorAnnouncement, setAddErrorAnnouncement] = useState("");
   const [apiKeyDialogNotification, setApiKeyDialogNotification] = useState<
     RegistrationNotification | undefined
   >();
@@ -483,6 +485,30 @@ export function ServerCatalog() {
     [],
   );
 
+  const showAddError = useCallback(
+    (server: CatalogServer, message: string) => {
+      setAddErrors((current) => ({ ...current, [server.id]: message }));
+      setAddErrorAnnouncement(
+        intl.formatMessage(
+          { id: "mcpServer.catalog.addFailed.announcement" },
+          {
+            name: server.name,
+          },
+        ),
+      );
+    },
+    [intl],
+  );
+
+  const clearAddError = useCallback((serverId: string) => {
+    setAddErrors((current) => {
+      if (!(serverId in current)) return current;
+      const next = { ...current };
+      delete next[serverId];
+      return next;
+    });
+  }, []);
+
   const dismissRegistrationNotification = useCallback((notificationId: string) => {
     setRegistrationNotifications((current) =>
       current.filter((notification) => notification.id !== notificationId),
@@ -572,19 +598,23 @@ export function ServerCatalog() {
         notification: RegistrationNotification,
         shouldFocus?: boolean,
       ) => void = showRegistrationNotification,
+      onAddFailure?: (server: CatalogServer, message: string) => void,
     ): Promise<RegistrationResult> => {
       if (!beginAdding(server.id)) return { success: false };
       dismissRegistrationNotification(`add:${server.id}`);
+      clearAddError(server.id);
+      const reportAddFailure = (message: string) => {
+        if (onAddFailure) onAddFailure(server, message);
+        else reportNotification({ id: `add:${server.id}`, type: "error", message });
+      };
       try {
         const result = body
           ? await registerCatalogServer(server.id, body)
           : await registerCatalogServer(server.id);
         if (!result.success) {
-          reportNotification({
-            id: `add:${server.id}`,
-            type: "error",
-            message: result.message || intl.formatMessage({ id: "mcpServer.catalog.addError" }),
-          });
+          reportAddFailure(
+            result.message || intl.formatMessage({ id: "mcpServer.catalog.addError" }),
+          );
           return { success: false };
         }
 
@@ -627,11 +657,7 @@ export function ServerCatalog() {
           return { success: false };
         }
 
-        reportNotification({
-          id: `add:${server.id}`,
-          type: "error",
-          message: intl.formatMessage({ id: "mcpServer.catalog.addError" }),
-        });
+        reportAddFailure(intl.formatMessage({ id: "mcpServer.catalog.addError" }));
         return { success: false };
       } finally {
         endAdding(server.id);
@@ -639,6 +665,7 @@ export function ServerCatalog() {
     },
     [
       beginAdding,
+      clearAddError,
       dismissRegistrationNotification,
       endAdding,
       intl,
@@ -660,9 +687,11 @@ export function ServerCatalog() {
         setOAuthServer(server);
         return;
       }
-      if (server.auth_type === OPEN_AUTH_TYPE) void registerServer(server);
+      if (server.auth_type === OPEN_AUTH_TYPE) {
+        void registerServer(server, undefined, undefined, showAddError);
+      }
     },
-    [registerServer],
+    [registerServer, showAddError],
   );
 
   const handleApiKeySubmit = useCallback(
@@ -1252,8 +1281,13 @@ export function ServerCatalog() {
         canTest={canTest}
         canDisconnect={canDisconnect}
         oauthStatuses={oauthStatuses}
+        addErrors={addErrors}
       />
 
+      <p aria-live="polite" aria-atomic="true" className="sr-only">
+        {addErrorAnnouncement}
+      </p>
+
       <CatalogServerDetailsDialog server={selectedServer} onOpenChange={handleDetailsOpenChange} />
       <ConfirmDialog
         open={disconnectServer !== null}

From fd61c33e5a545344afac766e618b33ed11adc8fe Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 11:44:58 -0700
Subject: [PATCH 2/9] fix: name the status popover for screen readers

Radix gives PopoverContent role="dialog" without a name, so the shared
indicator's popover announced as an unnamed dialog. Adds contentAriaLabel
alongside the existing triggerAriaLabel and supplies it from both callers.

The trigger's string is not reused: it ends in "Show details", which reads
as an instruction to open what is already open and repeats the status text.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../server-catalog/CatalogResults.tsx           |  4 ++++
 .../servers/ServerStatusIndicator.tsx           |  4 ++++
 src/components/ui/status-indicator.test.tsx     | 17 +++++++++++++++++
 src/components/ui/status-indicator.tsx          |  5 ++++-
 src/i18n/locales/en-US/mcpServer.json           |  2 ++
 src/i18n/locales/es-ES/mcpServer.json           |  2 ++
 src/i18n/locales/pt-BR/mcpServer.json           |  2 ++
 7 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 171359f8..3ba52975 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -294,6 +294,10 @@ function CatalogCard({
                     { id: "mcpServer.catalog.addFailed.trigger" },
                     { name: server.name },
                   )}
+                  contentAriaLabel={intl.formatMessage(
+                    { id: "mcpServer.catalog.addFailed.detail" },
+                    { name: server.name },
+                  )}
                 >
                   <p className="break-words text-sm text-foreground">{addError}</p>
                 </StatusIndicator>
diff --git a/src/components/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index 7116f6e2..1d029bd5 100644
--- a/src/components/servers/ServerStatusIndicator.tsx
+++ b/src/components/servers/ServerStatusIndicator.tsx
@@ -114,6 +114,10 @@ export function ServerStatusIndicator({
         { id: "mcpServer.status.trigger" },
         { name: server.name, status: fullLabel },
       )}
+      contentAriaLabel={intl.formatMessage(
+        { id: "mcpServer.status.detail.label" },
+        { name: server.name },
+      )}
       interactive={interactive}
       className={className}
     >
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index d10fd0fc..dc814ed9 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -25,6 +25,23 @@ describe("StatusIndicator", () => {
     expect(await screen.findByText("Unable to add this server.")).toBeVisible();
   });
 
+  it("names the popover it opens", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <StatusIndicator
+        {...props}
+        triggerAriaLabel="Show details"
+        contentAriaLabel="Acme add failure details"
+      >
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show details" }));
+
+    expect(await screen.findByRole("dialog", { name: "Acme add failure details" })).toBeVisible();
+  });
+
   it("announces the full label where the visible one is abbreviated", () => {
     renderWithProviders(
       <StatusIndicator {...props} fullLabel="Error adding server" triggerAriaLabel="Show details">
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index 50b833ee..3e5938d1 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -14,6 +14,8 @@ interface StatusIndicatorProps {
   fullLabel?: string;
   /** Accessible name for the trigger. Required wherever `children` are given. */
   triggerAriaLabel?: string;
+  /** Accessible name for the popover, which Radix leaves unnamed. */
+  contentAriaLabel?: string;
   size?: "xs" | "sm";
   /** Render as plain text rather than a button. Required inside another button. */
   interactive?: boolean;
@@ -40,6 +42,7 @@ export function StatusIndicator({
   label,
   fullLabel,
   triggerAriaLabel,
+  contentAriaLabel,
   size = "xs",
   interactive = true,
   children,
@@ -79,7 +82,7 @@ export function StatusIndicator({
       >
         {content}
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-auto max-w-xs p-3">
+      <PopoverContent align="end" aria-label={contentAriaLabel} className="w-auto max-w-xs p-3">
         {children}
       </PopoverContent>
     </Popover>
diff --git a/src/i18n/locales/en-US/mcpServer.json b/src/i18n/locales/en-US/mcpServer.json
index 9fa49d83..839d2521 100644
--- a/src/i18n/locales/en-US/mcpServer.json
+++ b/src/i18n/locales/en-US/mcpServer.json
@@ -83,6 +83,7 @@
   "mcpServer.status.checking": "Connecting",
   "mcpServer.status.inactive": "Inactive",
   "mcpServer.status.trigger": "{name} status: {status}. Show details",
+  "mcpServer.status.detail.label": "{name} status details",
   "mcpServer.status.authorizeTrigger": "Authorize {name}",
   "mcpServer.status.detail.active": "This server is responding and its tools, resources, and prompts are up to date.",
   "mcpServer.status.detail.auth": "You have not authorized this server. Tools, resources, and prompts stay hidden until you do. Authorization is per person, so a colleague authorizing does not authorize you.",
@@ -160,6 +161,7 @@
   "mcpServer.catalog.addFailed.short": "Error",
   "mcpServer.catalog.addFailed.label": "Error adding server",
   "mcpServer.catalog.addFailed.trigger": "{name} status: error adding server. Show details",
+  "mcpServer.catalog.addFailed.detail": "{name} add failure details",
   "mcpServer.catalog.addFailed.announcement": "Error adding {name}",
   "mcpServer.catalog.addNotFound": "{name} is no longer available in the catalog.",
   "mcpServer.catalog.alreadyConnected": "{name} is already connected.",
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index 79a0e543..022044b2 100644
--- a/src/i18n/locales/es-ES/mcpServer.json
+++ b/src/i18n/locales/es-ES/mcpServer.json
@@ -83,6 +83,7 @@
   "mcpServer.status.checking": "Conectando",
   "mcpServer.status.inactive": "Inactivo",
   "mcpServer.status.trigger": "Estado de {name}: {status}. Ver detalles",
+  "mcpServer.status.detail.label": "Detalles del estado de {name}",
   "mcpServer.status.authorizeTrigger": "Autorizar {name}",
   "mcpServer.status.detail.active": "Este servidor responde y sus herramientas, recursos y prompts están al día.",
   "mcpServer.status.detail.auth": "No has autorizado este servidor. Sus herramientas, recursos y prompts permanecen ocultos hasta que lo hagas. La autorización es individual, así que si otra persona lo autoriza no queda autorizado para ti.",
@@ -160,6 +161,7 @@
   "mcpServer.catalog.addFailed.short": "Error",
   "mcpServer.catalog.addFailed.label": "Error al añadir el servidor",
   "mcpServer.catalog.addFailed.trigger": "Estado de {name}: error al añadir el servidor. Ver detalles",
+  "mcpServer.catalog.addFailed.detail": "Detalles del error al añadir {name}",
   "mcpServer.catalog.addFailed.announcement": "Error al añadir {name}",
   "mcpServer.catalog.addNotFound": "{name} ya no está disponible en el catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} ya está conectado.",
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 38b30d43..33d4950b 100644
--- a/src/i18n/locales/pt-BR/mcpServer.json
+++ b/src/i18n/locales/pt-BR/mcpServer.json
@@ -83,6 +83,7 @@
   "mcpServer.status.checking": "Conectando",
   "mcpServer.status.inactive": "Inativo",
   "mcpServer.status.trigger": "Status de {name}: {status}. Ver detalhes",
+  "mcpServer.status.detail.label": "Detalhes do status de {name}",
   "mcpServer.status.authorizeTrigger": "Autorizar {name}",
   "mcpServer.status.detail.active": "Este servidor está respondendo e suas ferramentas, recursos e prompts estão atualizados.",
   "mcpServer.status.detail.auth": "Você ainda não autorizou este servidor. As ferramentas, recursos e prompts ficam ocultos até que autorize. A autorização é individual, então outra pessoa autorizar não autoriza você.",
@@ -160,6 +161,7 @@
   "mcpServer.catalog.addFailed.short": "Erro",
   "mcpServer.catalog.addFailed.label": "Erro ao adicionar o servidor",
   "mcpServer.catalog.addFailed.trigger": "Status de {name}: erro ao adicionar o servidor. Ver detalhes",
+  "mcpServer.catalog.addFailed.detail": "Detalhes do erro ao adicionar {name}",
   "mcpServer.catalog.addFailed.announcement": "Erro ao adicionar {name}",
   "mcpServer.catalog.addNotFound": "{name} não está mais disponível no catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} já está conectado.",

From 39b42948c0f9d565c14268c0b4ef496fb9a2f22d Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 13:03:00 -0700
Subject: [PATCH 3/9] style: match the catalog add error to its design frame

The label uses the foreground token instead of muted, and the indicator
sits 8px further from the view button. The muted label stays the default
on StatusIndicator, so the servers page and the source picker are
unchanged.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/server-catalog/CatalogResults.tsx |  2 ++
 src/components/ui/status-indicator.test.tsx      | 10 ++++++++++
 src/components/ui/status-indicator.tsx           |  7 +++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 3ba52975..47eff1bc 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -288,6 +288,8 @@ function CatalogCard({
                 <StatusIndicator
                   Icon={STATUS_ICON.error}
                   iconClassName={STATUS_TONE_CLASS.error}
+                  labelClassName="text-foreground"
+                  className="ml-2"
                   label={intl.formatMessage({ id: "mcpServer.catalog.addFailed.short" })}
                   fullLabel={intl.formatMessage({ id: "mcpServer.catalog.addFailed.label" })}
                   triggerAriaLabel={intl.formatMessage(
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index dc814ed9..45dc7d56 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -63,6 +63,16 @@ describe("StatusIndicator", () => {
     expect(screen.getByText("Error")).not.toHaveAttribute("aria-hidden");
   });
 
+  it("mutes the label unless the caller overrides it", () => {
+    const { rerender } = renderWithProviders(<StatusIndicator {...props} />);
+
+    expect(screen.getByText("Error")).toHaveClass("text-muted-foreground");
+
+    rerender(<StatusIndicator {...props} labelClassName="text-foreground" />);
+
+    expect(screen.getByText("Error")).toHaveClass("text-foreground");
+  });
+
   it("renders as plain text where a button cannot nest", () => {
     renderWithProviders(
       <StatusIndicator {...props} interactive={false}>
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index 3e5938d1..d46e4bae 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -6,8 +6,10 @@ import { cn } from "@/lib/utils";
 
 interface StatusIndicatorProps {
   Icon: LucideIcon;
-  /** Applies to the icon only; the label always stays muted. */
+  /** Applies to the icon only. */
   iconClassName: string;
+  /** Overrides the muted label colour, which the catalog card does. */
+  labelClassName?: string;
   /** The visible label. Pass the abbreviated form where the column is narrow. */
   label: string;
   /** The unabbreviated label, announced in place of `label` when the two differ. */
@@ -39,6 +41,7 @@ const SIZE_CLASS = {
 export function StatusIndicator({
   Icon,
   iconClassName,
+  labelClassName = "text-muted-foreground",
   label,
   fullLabel,
   triggerAriaLabel,
@@ -58,7 +61,7 @@ export function StatusIndicator({
         aria-hidden="true"
         focusable="false"
       />
-      <span className="text-muted-foreground" aria-hidden={isAbbreviated || undefined}>
+      <span className={labelClassName} aria-hidden={isAbbreviated || undefined}>
         {label}
       </span>
       {isAbbreviated && <span className="sr-only">{fullLabel}</span>}

From 1e6440222a4f4cd2ca934c9cdcab736e7d253f87 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 14:10:07 -0700
Subject: [PATCH 4/9] fix: reannounce a repeat catalog add failure

The live region kept the previous message, so a second identical failure set
the same string, produced no DOM change and announced nothing. Emptying it
when the retry starts also drops the stale error once an add succeeds.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/pages/ServerCatalog.test.tsx | 33 ++++++++++++++++++++++++++++++++
 src/pages/ServerCatalog.tsx      |  2 ++
 2 files changed, 35 insertions(+)

diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index 116d0388..ada84c0e 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -847,6 +847,39 @@ describe("ServerCatalog", () => {
     expect(announcement).toHaveAttribute("aria-live", "polite");
   });
 
+  it("reannounces a repeat failure and drops the announcement once the add succeeds", async () => {
+    const user = userEvent.setup();
+    let failSecondAttempt: (error: Error) => void = () => {};
+    mockRegisterCatalogServer.mockRejectedValueOnce(new Error("network")).mockImplementationOnce(
+      () =>
+        new Promise((_resolve, reject) => {
+          failSecondAttempt = reject;
+        }),
+    );
+    renderWithRouter(<ServerCatalog />);
+    const liveRegion = () => document.querySelector("p[aria-live='polite']:not([role])");
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    await waitFor(() => expect(liveRegion()).toHaveTextContent("Error adding Public Notes"));
+
+    // The second failure repeats the first message, so the region has to empty
+    // while the attempt is in flight for there to be a change to announce.
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    expect(liveRegion()).toBeEmptyDOMElement();
+
+    failSecondAttempt(new Error("network"));
+    await waitFor(() => expect(liveRegion()).toHaveTextContent("Error adding Public Notes"));
+
+    mockRegisterCatalogServer.mockResolvedValue({
+      success: true,
+      message: "Registered",
+      server_id: "gw-public-notes",
+    });
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+
+    await waitFor(() => expect(liveRegion()).toBeEmptyDOMElement());
+  });
+
   it("clears the card error when the add is retried", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValueOnce(new Error("first attempt failed"));
diff --git a/src/pages/ServerCatalog.tsx b/src/pages/ServerCatalog.tsx
index d0bfaa60..597110cf 100644
--- a/src/pages/ServerCatalog.tsx
+++ b/src/pages/ServerCatalog.tsx
@@ -507,6 +507,8 @@ export function ServerCatalog() {
       delete next[serverId];
       return next;
     });
+    // Emptied on every retry, so a repeat failure is still a change to announce.
+    setAddErrorAnnouncement("");
   }, []);
 
   const dismissRegistrationNotification = useCallback((notificationId: string) => {

From 158a0e18b61851efe538617aef50b208f5719c11 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 23:31:19 -0700
Subject: [PATCH 5/9] refactor: pass registration reporting as one options
 object

The two reporters were trailing positional params, so wanting onAddFailure
alone meant passing undefined for reportNotification.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/pages/ServerCatalog.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/pages/ServerCatalog.tsx b/src/pages/ServerCatalog.tsx
index 597110cf..3d0d7a9a 100644
--- a/src/pages/ServerCatalog.tsx
+++ b/src/pages/ServerCatalog.tsx
@@ -76,6 +76,13 @@ interface RegistrationResult {
   gatewayId?: string;
 }
 
+interface RegistrationReporting {
+  // Destination for failures. Defaults to the page notification stack.
+  reportNotification?: (notification: RegistrationNotification, shouldFocus?: boolean) => void;
+  // Diverts add failures away from reportNotification, onto the card that failed.
+  onAddFailure?: (server: CatalogServer, message: string) => void;
+}
+
 type ImpactPreviewStatus = "idle" | "loading" | "loaded" | "error";
 
 const DISCONNECT_POLL_TIMEOUT_MS = 30_000;
@@ -596,11 +603,10 @@ export function ServerCatalog() {
     async (
       server: CatalogServer,
       body?: CatalogServerRegisterBody,
-      reportNotification: (
-        notification: RegistrationNotification,
-        shouldFocus?: boolean,
-      ) => void = showRegistrationNotification,
-      onAddFailure?: (server: CatalogServer, message: string) => void,
+      {
+        reportNotification = showRegistrationNotification,
+        onAddFailure,
+      }: RegistrationReporting = {},
     ): Promise<RegistrationResult> => {
       if (!beginAdding(server.id)) return { success: false };
       dismissRegistrationNotification(`add:${server.id}`);
@@ -690,7 +696,7 @@ export function ServerCatalog() {
         return;
       }
       if (server.auth_type === OPEN_AUTH_TYPE) {
-        void registerServer(server, undefined, undefined, showAddError);
+        void registerServer(server, undefined, { onAddFailure: showAddError });
       }
     },
     [registerServer, showAddError],
@@ -703,9 +709,9 @@ export function ServerCatalog() {
       // The dialog notification has no focus-ref registry like the grid's does, and doesn't
       // need one: InlineNotification already uses role="alert"/"status" for a11y announcement,
       // so shouldFocus is intentionally dropped here rather than passed to a state setter.
-      const { success } = await registerServer(apiKeyServer, body, (notification) =>
-        setApiKeyDialogNotification(notification),
-      );
+      const { success } = await registerServer(apiKeyServer, body, {
+        reportNotification: (notification) => setApiKeyDialogNotification(notification),
+      });
       if (success) setFocusActionsForServerId(apiKeyServer.id);
       return success;
     },
@@ -735,9 +741,9 @@ export function ServerCatalog() {
 
       let gatewayId = pendingOAuthGatewayId;
       if (!gatewayId) {
-        const registration = await registerServer(oauthServer, body, (notification) =>
-          setOAuthDialogNotification(notification),
-        );
+        const registration = await registerServer(oauthServer, body, {
+          reportNotification: (notification) => setOAuthDialogNotification(notification),
+        });
         if (!registration.success) {
           authWindow.close();
           return false;

From be3e8d48ac034850e34bec6700ec4536f450c9ce Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 23:31:26 -0700
Subject: [PATCH 6/9] test: cover the rejected-response path to the card error

The card error tests all went through a thrown request. A resolved
{ success: false } response takes a different branch and is the only one
that shows the backend's own message.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/pages/ServerCatalog.test.tsx | 39 ++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index ada84c0e..d3d2b7a2 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -836,6 +836,45 @@ describe("ServerCatalog", () => {
     expect(screen.queryByText(/network detail/i)).not.toBeInTheDocument();
   });
 
+  it("shows the reason a rejected registration gives on the card that failed", async () => {
+    const user = userEvent.setup();
+    // server_id is empty rather than absent on every backend rejection.
+    mockRegisterCatalogServer.mockResolvedValue({
+      success: false,
+      server_id: "",
+      message: "Remote server error - the MCP server is experiencing issues",
+    });
+    renderWithRouter(<ServerCatalog />);
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+
+    const indicator = await screen.findByRole("button", {
+      name: "Public Notes status: error adding server. Show details",
+    });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+
+    await user.click(indicator);
+
+    expect(
+      await screen.findByText("Remote server error - the MCP server is experiencing issues"),
+    ).toBeVisible();
+  });
+
+  it("falls back to generic copy where a rejected registration carries no message", async () => {
+    const user = userEvent.setup();
+    mockRegisterCatalogServer.mockResolvedValue({ success: false, server_id: "", message: "" });
+    renderWithRouter(<ServerCatalog />);
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    await user.click(
+      await screen.findByRole("button", {
+        name: "Public Notes status: error adding server. Show details",
+      }),
+    );
+
+    expect(await screen.findByText("Unable to add this server. Try again.")).toBeVisible();
+  });
+
   it("announces an add failure the card indicator only shows silently", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValue(new Error("network"));

From f790586e5e6f082fc5096b564c79957ddf97ece5 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Fri, 25 Sep 2026 11:52:38 -0700
Subject: [PATCH 7/9] fix: scope the catalog add failure announcement

Announce the reason alongside the name, and leave the announcement alone
when a different server starts an add, whose failure is still on its card.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/i18n/locales/en-US/mcpServer.json |  2 +-
 src/i18n/locales/es-ES/mcpServer.json |  2 +-
 src/i18n/locales/pt-BR/mcpServer.json |  2 +-
 src/pages/ServerCatalog.test.tsx      | 32 +++++++++++++++++++++++++--
 src/pages/ServerCatalog.tsx           | 19 +++++++++-------
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/i18n/locales/en-US/mcpServer.json b/src/i18n/locales/en-US/mcpServer.json
index 839d2521..07a0ba8f 100644
--- a/src/i18n/locales/en-US/mcpServer.json
+++ b/src/i18n/locales/en-US/mcpServer.json
@@ -162,7 +162,7 @@
   "mcpServer.catalog.addFailed.label": "Error adding server",
   "mcpServer.catalog.addFailed.trigger": "{name} status: error adding server. Show details",
   "mcpServer.catalog.addFailed.detail": "{name} add failure details",
-  "mcpServer.catalog.addFailed.announcement": "Error adding {name}",
+  "mcpServer.catalog.addFailed.announcement": "Error adding {name}. {message}",
   "mcpServer.catalog.addNotFound": "{name} is no longer available in the catalog.",
   "mcpServer.catalog.alreadyConnected": "{name} is already connected.",
   "mcpServer.catalog.actionsFor": "Actions for {name}",
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index 022044b2..3562edaf 100644
--- a/src/i18n/locales/es-ES/mcpServer.json
+++ b/src/i18n/locales/es-ES/mcpServer.json
@@ -162,7 +162,7 @@
   "mcpServer.catalog.addFailed.label": "Error al añadir el servidor",
   "mcpServer.catalog.addFailed.trigger": "Estado de {name}: error al añadir el servidor. Ver detalles",
   "mcpServer.catalog.addFailed.detail": "Detalles del error al añadir {name}",
-  "mcpServer.catalog.addFailed.announcement": "Error al añadir {name}",
+  "mcpServer.catalog.addFailed.announcement": "Error al añadir {name}. {message}",
   "mcpServer.catalog.addNotFound": "{name} ya no está disponible en el catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} ya está conectado.",
   "mcpServer.catalog.actionsFor": "Acciones para {name}",
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 33d4950b..c8154020 100644
--- a/src/i18n/locales/pt-BR/mcpServer.json
+++ b/src/i18n/locales/pt-BR/mcpServer.json
@@ -162,7 +162,7 @@
   "mcpServer.catalog.addFailed.label": "Erro ao adicionar o servidor",
   "mcpServer.catalog.addFailed.trigger": "Status de {name}: erro ao adicionar o servidor. Ver detalhes",
   "mcpServer.catalog.addFailed.detail": "Detalhes do erro ao adicionar {name}",
-  "mcpServer.catalog.addFailed.announcement": "Erro ao adicionar {name}",
+  "mcpServer.catalog.addFailed.announcement": "Erro ao adicionar {name}. {message}",
   "mcpServer.catalog.addNotFound": "{name} não está mais disponível no catálogo.",
   "mcpServer.catalog.alreadyConnected": "{name} já está conectado.",
   "mcpServer.catalog.actionsFor": "Ações para {name}",
diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index d3d2b7a2..37c48d5f 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -875,14 +875,16 @@ describe("ServerCatalog", () => {
     expect(await screen.findByText("Unable to add this server. Try again.")).toBeVisible();
   });
 
-  it("announces an add failure the card indicator only shows silently", async () => {
+  it("announces an add failure with the reason the card indicator only shows silently", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValue(new Error("network"));
     renderWithRouter(<ServerCatalog />);
 
     await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
 
-    const announcement = await screen.findByText("Error adding Public Notes");
+    const announcement = await screen.findByText(
+      "Error adding Public Notes. Unable to add this server. Try again.",
+    );
     expect(announcement).toHaveAttribute("aria-live", "polite");
   });
 
@@ -919,6 +921,32 @@ describe("ServerCatalog", () => {
     await waitFor(() => expect(liveRegion()).toBeEmptyDOMElement());
   });
 
+  it("keeps a failure announced while an unrelated server is added", async () => {
+    const user = userEvent.setup();
+    mockUseQuery.mockReturnValue(
+      queryResult({
+        data: {
+          ...response,
+          servers: [...response.servers, { ...openAvailable, id: "open-other", name: "Team Wiki" }],
+          total: 5,
+        },
+      }),
+    );
+    mockRegisterCatalogServer
+      .mockRejectedValueOnce(new Error("network"))
+      .mockImplementationOnce(() => new Promise(() => {}));
+    renderWithRouter(<ServerCatalog />);
+    const liveRegion = () => document.querySelector("p[aria-live='polite']:not([role])");
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    await waitFor(() => expect(liveRegion()).toHaveTextContent("Error adding Public Notes"));
+
+    // Every add flow clears, but the announcement belongs to the server that failed.
+    await user.click(screen.getByRole("button", { name: "Add Team Wiki" }));
+
+    expect(liveRegion()).toHaveTextContent("Error adding Public Notes");
+  });
+
   it("clears the card error when the add is retried", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValueOnce(new Error("first attempt failed"));
diff --git a/src/pages/ServerCatalog.tsx b/src/pages/ServerCatalog.tsx
index 3d0d7a9a..5c1bc02c 100644
--- a/src/pages/ServerCatalog.tsx
+++ b/src/pages/ServerCatalog.tsx
@@ -411,6 +411,7 @@ export function ServerCatalog() {
     RegistrationNotification[]
   >([]);
   const [addErrors, setAddErrors] = useState<Record<string, string>>({});
+  const addErrorsRef = useRef<Record<string, string>>({});
   const [addErrorAnnouncement, setAddErrorAnnouncement] = useState("");
   const [apiKeyDialogNotification, setApiKeyDialogNotification] = useState<
     RegistrationNotification | undefined
@@ -494,12 +495,14 @@ export function ServerCatalog() {
 
   const showAddError = useCallback(
     (server: CatalogServer, message: string) => {
-      setAddErrors((current) => ({ ...current, [server.id]: message }));
+      addErrorsRef.current = { ...addErrorsRef.current, [server.id]: message };
+      setAddErrors(addErrorsRef.current);
       setAddErrorAnnouncement(
         intl.formatMessage(
           { id: "mcpServer.catalog.addFailed.announcement" },
           {
             name: server.name,
+            message,
           },
         ),
       );
@@ -507,14 +510,14 @@ export function ServerCatalog() {
     [intl],
   );
 
+  // Returns early for any other server, whose failure is still on its card.
   const clearAddError = useCallback((serverId: string) => {
-    setAddErrors((current) => {
-      if (!(serverId in current)) return current;
-      const next = { ...current };
-      delete next[serverId];
-      return next;
-    });
-    // Emptied on every retry, so a repeat failure is still a change to announce.
+    if (!(serverId in addErrorsRef.current)) return;
+    const next = { ...addErrorsRef.current };
+    delete next[serverId];
+    addErrorsRef.current = next;
+    setAddErrors(next);
+    // Emptied on retry, so a repeat failure is still a change to announce.
     setAddErrorAnnouncement("");
   }, []);
 

From 96863b05d97db2ddfb72a5ef3ef7c1ecdb639850 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Fri, 25 Sep 2026 13:03:06 -0700
Subject: [PATCH 8/9] feat: retire the catalog add error once its reason is
 read

Closing the popover clears the error, so the badge does not need a
dismiss control in a card footer with no room for one.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../server-catalog/CatalogResults.tsx         |  9 ++++++++
 src/components/ui/status-indicator.tsx        |  5 +++-
 src/pages/ServerCatalog.test.tsx              | 23 +++++++++++++++++++
 src/pages/ServerCatalog.tsx                   |  1 +
 4 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 47eff1bc..a284abcf 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -80,6 +80,7 @@ function CatalogCard({
   canDisconnect,
   oauthStatuses,
   addError,
+  onAddErrorRead,
 }: {
   server: CatalogServer;
   onView: (trigger: HTMLElement) => void;
@@ -95,6 +96,8 @@ function CatalogCard({
   oauthStatuses?: Readonly<Record<string, OAuthGatewayStatus>>;
   /** Why the last add attempt failed, resolved to the server's reason or the fallback. */
   addError?: string;
+  /** Called once the reason has been read, which is what retires the error. */
+  onAddErrorRead?: () => void;
 }) {
   const intl = useIntl();
   const headingId = useId();
@@ -300,6 +303,9 @@ function CatalogCard({
                     { id: "mcpServer.catalog.addFailed.detail" },
                     { name: server.name },
                   )}
+                  onOpenChange={(open) => {
+                    if (!open) onAddErrorRead?.();
+                  }}
                 >
                   <p className="break-words text-sm text-foreground">{addError}</p>
                 </StatusIndicator>
@@ -402,6 +408,7 @@ export function CatalogResults({
   canDisconnect,
   oauthStatuses = EMPTY_OAUTH_STATUSES,
   addErrors = EMPTY_ADD_ERRORS,
+  onAddErrorRead,
 }: {
   servers: CatalogServer[];
   emptyStateMessageId: string;
@@ -417,6 +424,7 @@ export function CatalogResults({
   canDisconnect: boolean;
   oauthStatuses?: Readonly<Record<string, OAuthGatewayStatus>>;
   addErrors?: Readonly<Record<string, string>>;
+  onAddErrorRead?: (serverId: string) => void;
 }) {
   const intl = useIntl();
   const announcedCount = useDebouncedValue(servers.length, 300);
@@ -447,6 +455,7 @@ export function CatalogResults({
               canDisconnect={canDisconnect}
               oauthStatuses={oauthStatuses}
               addError={addErrors[server.id]}
+              onAddErrorRead={onAddErrorRead && (() => onAddErrorRead(server.id))}
             />
           ))}
         </ul>
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index d46e4bae..f91d66ab 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -23,6 +23,8 @@ interface StatusIndicatorProps {
   interactive?: boolean;
   /** Popover contents. Without them the indicator has nothing to open and stays plain text. */
   children?: ReactNode;
+  /** Fires on open and on close, for a caller that treats reading the popover as an action. */
+  onOpenChange?: (open: boolean) => void;
   className?: string;
 }
 
@@ -49,6 +51,7 @@ export function StatusIndicator({
   size = "xs",
   interactive = true,
   children,
+  onOpenChange,
   className,
 }: StatusIndicatorProps) {
   const isAbbreviated = Boolean(fullLabel && fullLabel !== label);
@@ -73,7 +76,7 @@ export function StatusIndicator({
   }
 
   return (
-    <Popover>
+    <Popover onOpenChange={onOpenChange}>
       <PopoverTrigger
         type="button"
         aria-label={triggerAriaLabel}
diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index 37c48d5f..8db991ef 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -947,6 +947,29 @@ describe("ServerCatalog", () => {
     expect(liveRegion()).toHaveTextContent("Error adding Public Notes");
   });
 
+  it("retires the card error once the reason has been read", async () => {
+    const user = userEvent.setup();
+    mockRegisterCatalogServer.mockRejectedValueOnce(new Error("network"));
+    renderWithRouter(<ServerCatalog />);
+
+    await user.click(screen.getByRole("button", { name: "Add Public Notes" }));
+    const indicator = await screen.findByRole("button", {
+      name: "Public Notes status: error adding server. Show details",
+    });
+
+    await user.click(indicator);
+    expect(await screen.findByRole("dialog")).toBeVisible();
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+    expect(
+      screen.queryByRole("button", {
+        name: "Public Notes status: error adding server. Show details",
+      }),
+    ).not.toBeInTheDocument();
+  });
+
   it("clears the card error when the add is retried", async () => {
     const user = userEvent.setup();
     mockRegisterCatalogServer.mockRejectedValueOnce(new Error("first attempt failed"));
diff --git a/src/pages/ServerCatalog.tsx b/src/pages/ServerCatalog.tsx
index 5c1bc02c..6c9cd210 100644
--- a/src/pages/ServerCatalog.tsx
+++ b/src/pages/ServerCatalog.tsx
@@ -1293,6 +1293,7 @@ export function ServerCatalog() {
         canDisconnect={canDisconnect}
         oauthStatuses={oauthStatuses}
         addErrors={addErrors}
+        onAddErrorRead={clearAddError}
       />
 
       <p aria-live="polite" aria-atomic="true" className="sr-only">

From 4503e3752d39b15bc63c58d5975a8caeda2ce02a Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Fri, 25 Sep 2026 14:09:34 -0700
Subject: [PATCH 9/9] fix: keep focus on the card when the add error retires

Closing the popover unmounts the trigger focus returns to, dropping it
on the body. Focus moves to Add, and only where it was otherwise lost.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../server-catalog/CatalogResults.tsx         | 20 ++++++++++++++++++-
 src/pages/ServerCatalog.test.tsx              |  3 +++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index a284abcf..6bde098d 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -105,6 +105,7 @@ function CatalogCard({
   const actionsTriggerRef = useRef<HTMLButtonElement | null>(null);
   const pendingDetailsTriggerRef = useRef<HTMLButtonElement | null>(null);
   const shouldTransferAddFocusRef = useRef(false);
+  const shouldRestoreErrorFocusRef = useRef(false);
   const oauthState = getOAuthCardState(
     server,
     server.gateway_id ? oauthStatuses?.[server.gateway_id] : undefined,
@@ -125,6 +126,21 @@ function CatalogCard({
     }
   }, [isAdding, server.is_registered]);
 
+  // Retiring the error unmounts the trigger the popover returns focus to.
+  useEffect(() => {
+    if (addError || !shouldRestoreErrorFocusRef.current) return;
+    shouldRestoreErrorFocusRef.current = false;
+
+    const timeoutId = window.setTimeout(() => {
+      const trigger = addTriggerRef.current;
+      if (!trigger) return;
+      const { activeElement, body } = trigger.ownerDocument;
+      if (activeElement === null || activeElement === body) trigger.focus();
+    }, 0);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [addError]);
+
   return (
     <li className="min-w-0">
       <Card className="h-full min-h-[200px] gap-0 rounded-xl border border-border bg-card p-0 py-0 shadow-none ring-0 transition-colors hover:border-ring dark:hover:border-muted-foreground">
@@ -304,7 +320,9 @@ function CatalogCard({
                     { name: server.name },
                   )}
                   onOpenChange={(open) => {
-                    if (!open) onAddErrorRead?.();
+                    if (open) return;
+                    shouldRestoreErrorFocusRef.current = true;
+                    onAddErrorRead?.();
                   }}
                 >
                   <p className="break-words text-sm text-foreground">{addError}</p>
diff --git a/src/pages/ServerCatalog.test.tsx b/src/pages/ServerCatalog.test.tsx
index 8db991ef..585f8335 100644
--- a/src/pages/ServerCatalog.test.tsx
+++ b/src/pages/ServerCatalog.test.tsx
@@ -968,6 +968,9 @@ describe("ServerCatalog", () => {
         name: "Public Notes status: error adding server. Show details",
       }),
     ).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add Public Notes" })).toHaveFocus(),
+    );
   });
 
   it("clears the card error when the add is retried", async () => {