From 9b58a7367a2f88a4fd4d0c274c3de44c20118dc7 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 22:25:46 -0700
Subject: [PATCH 1/6] refactor: extract the presentational shell of the status
 indicator

ServerStatusIndicator keeps the availability classification and the authorize
branch, and composes ui/status-indicator for the icon, label and popover, so
other surfaces can reuse the shape without the server status model.

Names the popover content as well. Radix gives PopoverContent role=dialog
without a name, and the trigger string ends in Show details, which reads as an
instruction to open what is already open.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../servers/ServerStatusIndicator.tsx         | 81 ++++++++---------
 src/components/ui/status-indicator.test.tsx   | 82 +++++++++++++++++
 src/components/ui/status-indicator.tsx        | 90 +++++++++++++++++++
 src/i18n/locales/en-US/mcpServer.json         |  1 +
 src/i18n/locales/es-ES/mcpServer.json         |  1 +
 src/i18n/locales/pt-BR/mcpServer.json         |  1 +
 6 files changed, 210 insertions(+), 46 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/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index 99cebf06..1d029bd5 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,28 @@ 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 },
+      )}
+      contentAriaLabel={intl.formatMessage(
+        { id: "mcpServer.status.detail.label" },
+        { name: server.name },
+      )}
+      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..dc814ed9
--- /dev/null
+++ b/src/components/ui/status-indicator.test.tsx
@@ -0,0 +1,82 @@
+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("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">
+        <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..3e5938d1
--- /dev/null
+++ b/src/components/ui/status-indicator.tsx
@@ -0,0 +1,90 @@
+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;
+  /** 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;
+  /** 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,
+  contentAriaLabel,
+  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" 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 98c87958..b9cb69b1 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.",
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index f733ca1e..f182c655 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.",
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 46b60ee4..1cbb23cd 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ê.",

From 61dac4266ddc27c2655bf36fd896abd3e6453b6c Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 23:09:40 -0700
Subject: [PATCH 2/6] fix: name the popover from the label when no name is
 given

contentAriaLabel is optional, so a caller passing children without it produced
the unnamed dialog this component exists to avoid. Falls back to fullLabel and
then label, both of which describe the status the popover explains.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/ui/status-indicator.test.tsx | 13 +++++++++++++
 src/components/ui/status-indicator.tsx      |  8 ++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index dc814ed9..dccba24f 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -42,6 +42,19 @@ describe("StatusIndicator", () => {
     expect(await screen.findByRole("dialog", { name: "Acme add failure details" })).toBeVisible();
   });
 
+  it("names the popover from the label where the caller gives no name", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <StatusIndicator {...props} fullLabel="Error adding server" triggerAriaLabel="Show details">
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show details" }));
+
+    expect(await screen.findByRole("dialog", { name: "Error adding server" })).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 3e5938d1..941c43df 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -14,7 +14,7 @@ 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. */
+  /** Accessible name for the popover, which Radix leaves unnamed. Falls back to the label. */
   contentAriaLabel?: string;
   size?: "xs" | "sm";
   /** Render as plain text rather than a button. Required inside another button. */
@@ -82,7 +82,11 @@ export function StatusIndicator({
       >
         {content}
       </PopoverTrigger>
-      <PopoverContent align="end" aria-label={contentAriaLabel} className="w-auto max-w-xs p-3">
+      <PopoverContent
+        align="end"
+        aria-label={contentAriaLabel ?? fullLabel ?? label}
+        className="w-auto max-w-xs p-3"
+      >
         {children}
       </PopoverContent>
     </Popover>

From cd71a8256b6b9d10f424f359b04cf1fba4e005ce Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Thu, 24 Sep 2026 23:39:39 -0700
Subject: [PATCH 3/6] refactor: share the trigger classes with the authorize
 branch

Extracting the shell split one pair of class strings across two files.

Also covers the trigger's accessible name, which comes from its content
rather than triggerAriaLabel.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../servers/ServerStatusIndicator.tsx         |  7 ++-----
 src/components/ui/status-indicator.test.tsx   | 21 +++++++++++++++++++
 src/components/ui/status-indicator.tsx        | 15 +++++++------
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index 1d029bd5..5e506329 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 { StatusIndicator } from "@/components/ui/status-indicator";
+import { StatusIndicator, STATUS_INDICATOR_TRIGGER_CLASS } from "@/components/ui/status-indicator";
 import { cn } from "@/lib/utils";
 import {
   getAvailabilityPresentation,
@@ -62,9 +62,6 @@ export function ServerStatusIndicator({
   const isAbbreviated = compact && presentation.shortLabelId !== presentation.labelId;
 
   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)}
@@ -91,7 +88,7 @@ export function ServerStatusIndicator({
           { id: "mcpServer.status.authorizeTrigger" },
           { name: server.name },
         )}
-        className={cn(layout, trigger, "disabled:opacity-70", className)}
+        className={cn(STATUS_INDICATOR_TRIGGER_CLASS, "disabled:opacity-70", className)}
       >
         {icon}
         <span className="grid justify-items-start text-muted-foreground">
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index dccba24f..d39797d1 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -55,6 +55,27 @@ describe("StatusIndicator", () => {
     expect(await screen.findByRole("dialog", { name: "Error adding server" })).toBeVisible();
   });
 
+  // A button is named by its content, so the trigger needs no aria-label fallback.
+  it("names the trigger from the visible label where the caller gives no name", () => {
+    renderWithProviders(
+      <StatusIndicator {...props}>
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    expect(screen.getByRole("button", { name: "Error" })).toBeInTheDocument();
+  });
+
+  it("names the trigger from the full label where the visible one is abbreviated", () => {
+    renderWithProviders(
+      <StatusIndicator {...props} fullLabel="Error adding server">
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    expect(screen.getByRole("button", { name: "Error adding server" })).toBeInTheDocument();
+  });
+
   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 941c43df..5c405e1b 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -29,6 +29,13 @@ const SIZE_CLASS = {
   sm: "text-sm",
 } as const;
 
+const LAYOUT_CLASS = "inline-flex items-center gap-1.5";
+const TRIGGER_CLASS =
+  "rounded hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+/** The interactive shell, for a caller whose trigger holds something this cannot render. */
+export const STATUS_INDICATOR_TRIGGER_CLASS = cn(LAYOUT_CLASS, SIZE_CLASS.xs, TRIGGER_CLASS);
+
 /**
  * Status icon and label, optionally opening a popover that explains the state.
  *
@@ -49,7 +56,7 @@ export function StatusIndicator({
   className,
 }: StatusIndicatorProps) {
   const isAbbreviated = Boolean(fullLabel && fullLabel !== label);
-  const layout = cn("inline-flex items-center gap-1.5", SIZE_CLASS[size]);
+  const layout = cn(LAYOUT_CLASS, SIZE_CLASS[size]);
 
   const content = (
     <>
@@ -74,11 +81,7 @@ export function StatusIndicator({
       <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,
-        )}
+        className={cn(layout, TRIGGER_CLASS, className)}
       >
         {content}
       </PopoverTrigger>

From 82ac6a2e6f24e3053e01e63a388f92f592a9c1fa Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Fri, 25 Sep 2026 11:49:02 -0700
Subject: [PATCH 4/6] refactor: address status indicator review feedback

Share the status icon with the authorize branch, drop the unused size
prop, and fall through a blank content label rather than leaving the
popover dialog unnamed.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../servers/ServerStatusIndicator.tsx         | 16 +++-----
 src/components/ui/status-indicator.test.tsx   | 13 ++++++
 src/components/ui/status-indicator.tsx        | 40 +++++++++----------
 3 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index 5e506329..d4b6872b 100644
--- a/src/components/servers/ServerStatusIndicator.tsx
+++ b/src/components/servers/ServerStatusIndicator.tsx
@@ -1,7 +1,11 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
 
-import { StatusIndicator, STATUS_INDICATOR_TRIGGER_CLASS } from "@/components/ui/status-indicator";
+import {
+  StatusIndicator,
+  StatusIndicatorIcon,
+  STATUS_INDICATOR_TRIGGER_CLASS,
+} from "@/components/ui/status-indicator";
 import { cn } from "@/lib/utils";
 import {
   getAvailabilityPresentation,
@@ -62,14 +66,6 @@ export function ServerStatusIndicator({
   const isAbbreviated = compact && presentation.shortLabelId !== presentation.labelId;
 
   if (interactive && authorize) {
-    const icon = (
-      <StatusIcon
-        className={cn("h-3.5 w-3.5 shrink-0", presentation.iconClassName)}
-        aria-hidden="true"
-        focusable="false"
-      />
-    );
-
     const runAuthorize = async () => {
       setIsAuthorizing(true);
       try {
@@ -90,7 +86,7 @@ export function ServerStatusIndicator({
         )}
         className={cn(STATUS_INDICATOR_TRIGGER_CLASS, "disabled:opacity-70", className)}
       >
-        {icon}
+        <StatusIndicatorIcon Icon={StatusIcon} className={presentation.iconClassName} />
         <span className="grid justify-items-start text-muted-foreground">
           <span className="col-start-1 row-start-1">{label}</span>
           <span className="invisible col-start-1 row-start-1" aria-hidden="true">
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index d39797d1..2018255d 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -55,6 +55,19 @@ describe("StatusIndicator", () => {
     expect(await screen.findByRole("dialog", { name: "Error adding server" })).toBeVisible();
   });
 
+  it("falls through a blank name rather than leaving the popover unnamed", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <StatusIndicator {...props} contentAriaLabel="" triggerAriaLabel="Show details">
+        <p>Unable to add this server.</p>
+      </StatusIndicator>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show details" }));
+
+    expect(await screen.findByRole("dialog", { name: "Error" })).toBeVisible();
+  });
+
   // A button is named by its content, so the trigger needs no aria-label fallback.
   it("names the trigger from the visible label where the caller gives no name", () => {
     renderWithProviders(
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index 5c405e1b..6d402ced 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -12,11 +12,13 @@ interface StatusIndicatorProps {
   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. */
+  /**
+   * Overrides the name the visible label gives the trigger. Pass it where the
+   * label alone does not say what the status is about.
+   */
   triggerAriaLabel?: string;
   /** Accessible name for the popover, which Radix leaves unnamed. Falls back to the label. */
   contentAriaLabel?: 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. */
@@ -24,24 +26,25 @@ interface StatusIndicatorProps {
   className?: string;
 }
 
-const SIZE_CLASS = {
-  xs: "text-xs",
-  sm: "text-sm",
-} as const;
-
-const LAYOUT_CLASS = "inline-flex items-center gap-1.5";
+const LAYOUT_CLASS = "inline-flex items-center gap-1.5 text-xs";
 const TRIGGER_CLASS =
   "rounded hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 
 /** The interactive shell, for a caller whose trigger holds something this cannot render. */
-export const STATUS_INDICATOR_TRIGGER_CLASS = cn(LAYOUT_CLASS, SIZE_CLASS.xs, TRIGGER_CLASS);
+export const STATUS_INDICATOR_TRIGGER_CLASS = cn(LAYOUT_CLASS, TRIGGER_CLASS);
+
+/** The status icon, shared with a caller that builds its own trigger. */
+export function StatusIndicatorIcon({ Icon, className }: { Icon: LucideIcon; className?: string }) {
+  return (
+    <Icon className={cn("h-3.5 w-3.5 shrink-0", className)} aria-hidden="true" focusable="false" />
+  );
+}
 
 /**
  * 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.
+ * and copy, so that subjects with unrelated state models still read alike.
  */
 export function StatusIndicator({
   Icon,
@@ -50,21 +53,15 @@ export function StatusIndicator({
   fullLabel,
   triggerAriaLabel,
   contentAriaLabel,
-  size = "xs",
   interactive = true,
   children,
   className,
 }: StatusIndicatorProps) {
   const isAbbreviated = Boolean(fullLabel && fullLabel !== label);
-  const layout = cn(LAYOUT_CLASS, SIZE_CLASS[size]);
 
   const content = (
     <>
-      <Icon
-        className={cn("h-3.5 w-3.5 shrink-0", iconClassName)}
-        aria-hidden="true"
-        focusable="false"
-      />
+      <StatusIndicatorIcon Icon={Icon} className={iconClassName} />
       <span className="text-muted-foreground" aria-hidden={isAbbreviated || undefined}>
         {label}
       </span>
@@ -73,7 +70,7 @@ export function StatusIndicator({
   );
 
   if (!interactive || !children) {
-    return <span className={cn(layout, className)}>{content}</span>;
+    return <span className={cn(LAYOUT_CLASS, className)}>{content}</span>;
   }
 
   return (
@@ -81,13 +78,14 @@ export function StatusIndicator({
       <PopoverTrigger
         type="button"
         aria-label={triggerAriaLabel}
-        className={cn(layout, TRIGGER_CLASS, className)}
+        className={cn(LAYOUT_CLASS, TRIGGER_CLASS, className)}
       >
         {content}
       </PopoverTrigger>
       <PopoverContent
         align="end"
-        aria-label={contentAriaLabel ?? fullLabel ?? label}
+        // `||` not `??`: a blank label must fall through rather than leave the dialog unnamed.
+        aria-label={contentAriaLabel || fullLabel || label}
         className="w-auto max-w-xs p-3"
       >
         {children}

From f025d8c05cff4a02f28a5745e531a94177abd272 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Fri, 25 Sep 2026 12:29:42 -0700
Subject: [PATCH 5/6] refactor: drop the unused interactive prop

No caller passes it, and it cannot stop a button nesting inside one: it
only lets a caller who already knows to avoid it.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/servers/ServerStatusIndicator.test.tsx |  7 -------
 src/components/servers/ServerStatusIndicator.tsx      |  6 +-----
 src/components/ui/status-indicator.test.tsx           | 11 -----------
 src/components/ui/status-indicator.tsx                |  5 +----
 4 files changed, 2 insertions(+), 27 deletions(-)

diff --git a/src/components/servers/ServerStatusIndicator.test.tsx b/src/components/servers/ServerStatusIndicator.test.tsx
index 48eaebfa..1c150a70 100644
--- a/src/components/servers/ServerStatusIndicator.test.tsx
+++ b/src/components/servers/ServerStatusIndicator.test.tsx
@@ -142,11 +142,4 @@ describe("ServerStatusIndicator", () => {
       screen.getByRole("button", { name: "github-notify status: Authorization. Show details" }),
     ).toBeInTheDocument();
   });
-
-  it("renders as plain text where a button cannot nest", () => {
-    renderWithProviders(<ServerStatusIndicator server={server} interactive={false} />);
-
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-    expect(screen.getByText("Active")).toBeInTheDocument();
-  });
 });
diff --git a/src/components/servers/ServerStatusIndicator.tsx b/src/components/servers/ServerStatusIndicator.tsx
index d4b6872b..9dfd09a7 100644
--- a/src/components/servers/ServerStatusIndicator.tsx
+++ b/src/components/servers/ServerStatusIndicator.tsx
@@ -23,8 +23,6 @@ interface ServerStatusIndicatorProps {
   oauthTokenStatus?: OAuthTokenStatus;
   /** Use the short label, for narrow columns. Screen readers still get the full one. */
   compact?: boolean;
-  /** Render as plain text rather than a button. Required inside another button. */
-  interactive?: boolean;
   /**
    * Starts the OAuth authorization flow. Given only where the caller can run
    * it; without it the `auth` state explains itself like every other state.
@@ -47,7 +45,6 @@ export function ServerStatusIndicator({
   server,
   oauthTokenStatus,
   compact = false,
-  interactive = true,
   onAuthorize,
   className,
 }: ServerStatusIndicatorProps) {
@@ -65,7 +62,7 @@ export function ServerStatusIndicator({
   const fullLabel = intl.formatMessage({ id: presentation.labelId });
   const isAbbreviated = compact && presentation.shortLabelId !== presentation.labelId;
 
-  if (interactive && authorize) {
+  if (authorize) {
     const runAuthorize = async () => {
       setIsAuthorizing(true);
       try {
@@ -111,7 +108,6 @@ export function ServerStatusIndicator({
         { id: "mcpServer.status.detail.label" },
         { name: server.name },
       )}
-      interactive={interactive}
       className={className}
     >
       <ServerStatusDetail
diff --git a/src/components/ui/status-indicator.test.tsx b/src/components/ui/status-indicator.test.tsx
index 2018255d..c01c6c7a 100644
--- a/src/components/ui/status-indicator.test.tsx
+++ b/src/components/ui/status-indicator.test.tsx
@@ -110,17 +110,6 @@ describe("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} />);
 
diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index 6d402ced..113a2907 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -19,8 +19,6 @@ interface StatusIndicatorProps {
   triggerAriaLabel?: string;
   /** Accessible name for the popover, which Radix leaves unnamed. Falls back to the label. */
   contentAriaLabel?: string;
-  /** 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;
@@ -53,7 +51,6 @@ export function StatusIndicator({
   fullLabel,
   triggerAriaLabel,
   contentAriaLabel,
-  interactive = true,
   children,
   className,
 }: StatusIndicatorProps) {
@@ -69,7 +66,7 @@ export function StatusIndicator({
     </>
   );
 
-  if (!interactive || !children) {
+  if (!children) {
     return <span className={cn(LAYOUT_CLASS, className)}>{content}</span>;
   }
 

From 9e57228d2fb1f1162c190ba06170efcff12f1395 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Tue, 29 Sep 2026 15:14:28 -0700
Subject: [PATCH 6/6] refactor: type status indicator popover contents as an
 element

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/ui/status-indicator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/status-indicator.tsx b/src/components/ui/status-indicator.tsx
index 96e56dea..3f157767 100644
--- a/src/components/ui/status-indicator.tsx
+++ b/src/components/ui/status-indicator.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactElement } from "react";
 import type { LucideIcon } from "lucide-react";
 
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -23,7 +23,7 @@ interface StatusIndicatorProps {
   contentAriaLabel?: string;
   size?: "xs" | "sm";
   /** Popover contents. Without them the indicator has nothing to open and stays plain text. */
-  children?: ReactNode;
+  children?: ReactElement;
   /** Fires on open and on close, for a caller that treats reading the popover as an action. */
   onOpenChange?: (open: boolean) => void;
   className?: string;