@stigmer/react 3.11.0 → 3.12.0

package/src/mcp-server/__tests__/VendorApprovalBlocked.surfaces.test.tsx

@@ -0,0 +1,321 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { createRouterTransport } from "@connectrpc/connect";
+import { Stigmer } from "@stigmer/sdk";
+import { McpServerQueryController } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/query_pb";
+import { GetOAuthGrantStatusOutputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import {
+  McpServerSpecSchema,
+  McpServerAuthSchema,
+  HttpServerConfigSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
+import {
+  McpServerStatusSchema,
+  OAuthStatusSchema,
+  OAuthAppSource,
+  ValidationState,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import { samples } from "../../test/samples";
+import { StigmerContext } from "../../context";
+import { McpServerConnectDialog } from "../McpServerConnectDialog";
+import { McpServerDetailView } from "../McpServerDetailView";
+import { McpServerConfigPanel } from "../McpServerConfigPanel";
+import type { UseMcpServerReturn } from "../useMcpServer";
+
+/**
+ * Pins the oauth_only + vendor-approval-blocked combination across the three
+ * connect surfaces (stigmer/stigmer#412). Before the shared notice, this
+ * state was a silent dead end in the connect dialog (disabled button, no
+ * reason, no way forward) and two surfaces recommended manual token entry on
+ * servers whose endpoint rejects static tokens.
+ */
+
+// happy-dom does not implement the native dialog show/close methods.
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(cleanup);
+
+const ORG = "acme";
+const SLUG = "vendor-crm";
+const DOCS_URL = "https://vendor.example.com/oauth-docs";
+
+/**
+ * An oauth_only vendor-OAuth server whose platform OAuth app is blocked.
+ * `withAppRef` controls the BYOA arm: with a ref and a platform-sourced
+ * effective app, `canBringOwnApp` is true.
+ */
+function buildBlockedOAuthOnlyServer(options: {
+  status: VendorApprovalStatus;
+  withAppRef: boolean;
+}): McpServer {
+  const server = samples.mcpServer({ name: "Vendor CRM", org: ORG, slug: SLUG });
+  server.spec = create(McpServerSpecSchema, {
+    description: "CRM tools over the vendor's hosted MCP endpoint.",
+    serverType: {
+      case: "http",
+      value: create(HttpServerConfigSchema, { url: "https://mcp.vendor.example.com" }),
+    },
+    auth: create(McpServerAuthSchema, {
+      targetEnvVar: "VENDOR_ACCESS_TOKEN",
+      oauthOnly: true,
+      ...(options.withAppRef
+        ? {
+            oauthAppRef: {
+              org: "stigmer",
+              kind: ApiResourceKind.oauth_app,
+              slug: "vendor-oauth",
+            },
+          }
+        : {}),
+    }),
+  });
+  server.status = create(McpServerStatusSchema, {
+    validationState: ValidationState.valid,
+    oauthStatus: create(OAuthStatusSchema, {
+      vendorApprovalStatus: options.status,
+      vendorApprovalDocsUrl: DOCS_URL,
+      effectiveOauthSource: OAuthAppSource.OAUTH_APP_SOURCE_PLATFORM,
+    }),
+  });
+  return server;
+}
+
+function noGrant() {
+  return create(GetOAuthGrantStatusOutputSchema, { connected: false });
+}
+
+function renderWithTransport(
+  ui: ReactNode,
+  register: Parameters<typeof createRouterTransport>[0] = () => {},
+) {
+  const client = new Stigmer({
+    baseUrl: "/",
+    getAccessToken: () => "test-token",
+    customTransport: createRouterTransport(register),
+  });
+  return render(
+    <StigmerContext.Provider value={client}>{ui}</StigmerContext.Provider>,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Surface 1: McpServerConnectDialog — the surface that was a silent dead end
+// ---------------------------------------------------------------------------
+
+describe("McpServerConnectDialog — oauth_only + vendor-blocked", () => {
+  function renderDialog(server: McpServer, onOpenDetails?: () => void) {
+    return renderWithTransport(
+      <McpServerConnectDialog
+        org={ORG}
+        slug={SLUG}
+        open
+        onClose={() => {}}
+        onOpenDetails={onOpenDetails}
+      />,
+      (router) => {
+        router.service(McpServerQueryController, {
+          getByReference: () => server,
+          getOAuthGrantStatus: noGrant,
+        });
+      },
+    );
+  }
+
+  it("explains the blocked state instead of showing only a disabled button", async () => {
+    renderDialog(
+      buildBlockedOAuthOnlyServer({
+        status: VendorApprovalStatus.PENDING,
+        withAppRef: true,
+      }),
+    );
+
+    const signIn = await screen.findByRole("button", {
+      name: "Sign in with OAuth",
+    });
+    expect((signIn as HTMLButtonElement).disabled).toBe(true);
+    // The reason is always visible — this was the oss#412 dead end.
+    expect(screen.getByText(/is awaiting vendor approval/)).toBeTruthy();
+  });
+
+  it("never offers manual entry on an oauth_only server", async () => {
+    renderDialog(
+      buildBlockedOAuthOnlyServer({
+        status: VendorApprovalStatus.PENDING,
+        withAppRef: true,
+      }),
+    );
+
+    await screen.findByRole("button", { name: "Sign in with OAuth" });
+    // OAuthRequiredNotice legitimately says tokens are *rejected*; what must
+    // never appear is a recommendation to enter one.
+    expect(screen.queryByText(/enter (a|your) token manually/i)).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Enter token manually" }),
+    ).toBeNull();
+  });
+
+  it("routes the BYOA escape hatch to onOpenDetails", async () => {
+    const onOpenDetails = vi.fn();
+    renderDialog(
+      buildBlockedOAuthOnlyServer({
+        status: VendorApprovalStatus.PENDING,
+        withAppRef: true,
+      }),
+      onOpenDetails,
+    );
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Use your own OAuth app" }),
+    );
+    expect(onOpenDetails).toHaveBeenCalledTimes(1);
+  });
+
+  it("is honest about rejection and falls back to the docs link without BYOA", async () => {
+    renderDialog(
+      buildBlockedOAuthOnlyServer({
+        status: VendorApprovalStatus.REJECTED,
+        withAppRef: false,
+      }),
+    );
+
+    expect(
+      await screen.findByText(/was not approved by the vendor/),
+    ).toBeTruthy();
+    expect(screen.queryByText(/awaiting vendor approval/)).toBeNull();
+    const docs = screen.getByRole("link", {
+      name: /Learn how to bring your own token/,
+    });
+    expect(docs.getAttribute("href")).toBe(DOCS_URL);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Surface 2: McpServerDetailView — the banner that recommended a dead path
+// ---------------------------------------------------------------------------
+
+describe("McpServerDetailView — oauth_only + vendor-blocked", () => {
+  function loadedState(server: McpServer): UseMcpServerReturn {
+    return {
+      mcpServer: server,
+      isLoading: false,
+      isRefetching: false,
+      error: null,
+      refetch: vi.fn(),
+    };
+  }
+
+  it("offers BYOA without recommending manual entry, and keeps the tour's CTA marker", async () => {
+    renderWithTransport(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(
+          buildBlockedOAuthOnlyServer({
+            status: VendorApprovalStatus.PENDING,
+            withAppRef: true,
+          }),
+        )}
+      />,
+      (router) => {
+        router.service(McpServerQueryController, {
+          getOAuthGrantStatus: noGrant,
+        });
+      },
+    );
+
+    expect(
+      await screen.findByText(
+        "The platform's OAuth app is awaiting vendor approval. You can use your own OAuth app.",
+      ),
+    ).toBeTruthy();
+    // OAuthRequiredNotice legitimately says tokens are *rejected*; what must
+    // never appear is a recommendation to enter one.
+    expect(screen.queryByText(/enter (a|your) token manually/i)).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Enter token manually" }),
+    ).toBeNull();
+
+    const cta = screen.getByRole("button", { name: "Use your own OAuth app" });
+    // The byoa-setup docs tour targets this marker; it must survive the
+    // extraction into the shared notice.
+    expect(cta.getAttribute("data-cursor-target")).toBe("byoa-cta-button");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Surface 3: McpServerConfigPanel — the session-setup inline sign-in
+// ---------------------------------------------------------------------------
+
+describe("McpServerConfigPanel — oauth_only + vendor-blocked", () => {
+  function renderPanel(
+    oauthSignInOverrides: Record<string, unknown> = {},
+    panelOverrides: Record<string, unknown> = {},
+  ) {
+    const server = buildBlockedOAuthOnlyServer({
+      status: VendorApprovalStatus.PENDING,
+      withAppRef: true,
+    });
+    return renderWithTransport(
+      <McpServerConfigPanel
+        mcpServer={server}
+        oauthSignIn={{
+          onSignIn: () => {},
+          phase: "idle",
+          isConnected: false,
+          error: null,
+          onClearError: () => {},
+          isVendorApprovalPending: true,
+          isVendorApprovalBlocked: true,
+          vendorApprovalDocsUrl: DOCS_URL,
+          ...oauthSignInOverrides,
+        }}
+        discoveredTools={[]}
+        toolApprovals={[]}
+        enabledTools={[]}
+        onEnabledToolsChange={() => {}}
+        onBack={() => {}}
+        error={null}
+        {...panelOverrides}
+      />,
+    );
+  }
+
+  it("never claims manual entry when the affordance is not wired (oauth_only)", () => {
+    renderPanel();
+    expect(screen.getByText(/is awaiting vendor approval/)).toBeTruthy();
+    expect(screen.queryByText(/manually/)).toBeNull();
+  });
+
+  it("explicit manualEntrySupported=false wins even if a switch handler leaks through", () => {
+    renderPanel(
+      { manualEntrySupported: false },
+      { onSwitchToManual: () => {} },
+    );
+    expect(screen.getByText(/is awaiting vendor approval/)).toBeTruthy();
+    expect(
+      screen.getByText(/OAuth sign-in is temporarily unavailable for this server/),
+    ).toBeTruthy();
+    expect(
+      screen.queryByText(/You can use your own OAuth app or enter a token manually/),
+    ).toBeNull();
+  });
+
+  it("mentions manual entry when the panel actually offers it (legacy fallback)", () => {
+    renderPanel({}, { onSwitchToManual: () => {} });
+    expect(
+      screen.getByText(/You can still connect by entering your own token manually/),
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,154 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { VendorApprovalBlockedNotice } from "../VendorApprovalBlockedNotice";
+
+afterEach(cleanup);
+
+/**
+ * The copy contract for the vendor-approval-blocked state lives here.
+ *
+ * The invariant under test (stigmer/stigmer#412): the notice must never
+ * recommend a path that does not exist. "Enter a token manually" may only
+ * appear when the endpoint accepts static tokens; "use your own OAuth app"
+ * only when BYOA is relevant; and when neither exists the notice must still
+ * explain the state — a disabled button is never the only signal.
+ */
+
+const DOCS_URL = "https://vendor.example.com/oauth-docs";
+
+function renderNotice(
+  overrides: Partial<Parameters<typeof VendorApprovalBlockedNotice>[0]> = {},
+) {
+  return render(
+    <VendorApprovalBlockedNotice
+      blocked
+      pending
+      manualEntrySupported
+      canBringOwnApp={false}
+      docsUrl={null}
+      {...overrides}
+    />,
+  );
+}
+
+describe("VendorApprovalBlockedNotice — self-gating", () => {
+  it("renders nothing when not blocked", () => {
+    const { container } = renderNotice({ blocked: false });
+    expect(container.innerHTML).toBe("");
+  });
+});
+
+describe("VendorApprovalBlockedNotice — status sentence honesty", () => {
+  it("says awaiting approval for a PENDING app", () => {
+    renderNotice({ pending: true });
+    expect(
+      screen.getByText(/is awaiting vendor approval/),
+    ).toBeTruthy();
+  });
+
+  it("says not approved for a REJECTED app — never 'pending'", () => {
+    renderNotice({ pending: false });
+    expect(
+      screen.getByText(/was not approved by the vendor/),
+    ).toBeTruthy();
+    expect(screen.queryByText(/awaiting vendor approval/)).toBeNull();
+    expect(screen.queryByText(/pending/i)).toBeNull();
+  });
+});
+
+describe("VendorApprovalBlockedNotice — alternative-path matrix", () => {
+  it("BYOA + manual: offers both (the copy depicted in the byoa-setup tour, byte-stable)", () => {
+    renderNotice({ canBringOwnApp: true, manualEntrySupported: true });
+    expect(
+      screen.getByText(
+        "The platform's OAuth app is awaiting vendor approval. You can use your own OAuth app or enter a token manually.",
+      ),
+    ).toBeTruthy();
+  });
+
+  it("BYOA + oauth_only: offers BYOA and never mentions manual entry", () => {
+    renderNotice({ canBringOwnApp: true, manualEntrySupported: false });
+    expect(screen.getByText(/You can use your own OAuth app\./)).toBeTruthy();
+    expect(screen.queryByText(/manually/)).toBeNull();
+  });
+
+  it("no BYOA + manual: offers manual entry", () => {
+    renderNotice({ canBringOwnApp: false, manualEntrySupported: true });
+    expect(
+      screen.getByText(/You can still connect by entering your own token manually\./),
+    ).toBeTruthy();
+  });
+
+  it("no BYOA + oauth_only: still explains itself with no false path", () => {
+    renderNotice({ canBringOwnApp: false, manualEntrySupported: false });
+    expect(
+      screen.getByText(/OAuth sign-in is temporarily unavailable for this server\./),
+    ).toBeTruthy();
+    expect(screen.queryByText(/manually/)).toBeNull();
+    expect(screen.queryByText(/your own OAuth app/)).toBeNull();
+  });
+});
+
+describe("VendorApprovalBlockedNotice — affordances", () => {
+  it("renders the BYOA call-to-action and routes clicks", () => {
+    const onBringOwnApp = vi.fn();
+    renderNotice({ canBringOwnApp: true, onBringOwnApp });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Use your own OAuth app" }),
+    );
+    expect(onBringOwnApp).toHaveBeenCalledTimes(1);
+  });
+
+  it("omits the BYOA call-to-action when no action is wired, keeping the copy", () => {
+    renderNotice({ canBringOwnApp: true });
+    expect(
+      screen.queryByRole("button", { name: "Use your own OAuth app" }),
+    ).toBeNull();
+    expect(screen.getByText(/You can use your own OAuth app/)).toBeTruthy();
+  });
+
+  it("links the docs when BYOA is not offered inline", () => {
+    renderNotice({ canBringOwnApp: false, docsUrl: DOCS_URL });
+    const link = screen.getByRole("link", {
+      name: /Learn how to bring your own token/,
+    });
+    expect(link.getAttribute("href")).toBe(DOCS_URL);
+    expect(link.getAttribute("target")).toBe("_blank");
+  });
+
+  it("suppresses the docs link when the BYOA form (which carries it) is one click away", () => {
+    renderNotice({ canBringOwnApp: true, docsUrl: DOCS_URL, onBringOwnApp: vi.fn() });
+    expect(
+      screen.queryByRole("link", { name: /Learn how to bring your own token/ }),
+    ).toBeNull();
+  });
+
+  it("no-alternative floor: docs link is the way forward when present", () => {
+    renderNotice({
+      canBringOwnApp: false,
+      manualEntrySupported: false,
+      docsUrl: DOCS_URL,
+    });
+    expect(
+      screen.getByRole("link", { name: /Learn how to bring your own token/ }),
+    ).toBeTruthy();
+  });
+});
+
+describe("VendorApprovalBlockedNotice — compact variant", () => {
+  it("carries the same copy contract at the dense size", () => {
+    renderNotice({
+      compact: true,
+      pending: false,
+      canBringOwnApp: true,
+      manualEntrySupported: false,
+      onBringOwnApp: vi.fn(),
+    });
+    expect(screen.getByText(/was not approved by the vendor/)).toBeTruthy();
+    expect(screen.queryByText(/manually/)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Use your own OAuth app" }),
+    ).toBeTruthy();
+  });
+});

package/src/mcp-server/mcpServerSetupReducer.ts

@@ -1,5 +1,6 @@
 import type { ResourceRef } from "@stigmer/sdk";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import type { DiscoveredTool } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import type { ToolApprovalPolicy } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm.js";
@@ -61,6 +62,8 @@ export type McpServerSetupPhase =
       readonly discoveredTools: DiscoveredTool[];
       /** Per-tool approval policies from the server spec. */
       readonly toolApprovals: ToolApprovalPolicy[];
+      /** OAuth grant health at resolve time — full doc on the `ready` variant. */
+      readonly oauthConnectionHealth?: OAuthConnectionHealth;
     }
   | {
       /** Environment variables are being persisted or the instance is being provisioned. */
@@ -73,6 +76,8 @@ export type McpServerSetupPhase =
       readonly discoveredTools: DiscoveredTool[];
       /** Per-tool approval policies from the server spec. */
       readonly toolApprovals: ToolApprovalPolicy[];
+      /** OAuth grant health at resolve time — full doc on the `ready` variant. */
+      readonly oauthConnectionHealth?: OAuthConnectionHealth;
     }
   | {
       /** The server is fully configured and ready for session creation. */
@@ -85,6 +90,15 @@ export type McpServerSetupPhase =
       readonly toolApprovals: ToolApprovalPolicy[];
       /** Tool names enabled for this session, after user selection. */
       readonly enabledTools: string[];
+      /**
+       * OAuth grant health at resolve time, from the grant-status lookup
+       * `addServer` performs for OAuth-declaring servers. `undefined` when
+       * no lookup ran (server has no OAuth declaration) or the lookup
+       * failed. Consumers use it to distinguish "signed in but tools never
+       * discovered" (offer bare discovery, stigmer/stigmer#418) from
+       * "token expired" (offer re-auth) without another RPC.
+       */
+      readonly oauthConnectionHealth?: OAuthConnectionHealth;
     };
 
 /**
@@ -145,6 +159,8 @@ export type McpServerSetupAction =
       readonly discoveredTools: DiscoveredTool[];
       /** Per-tool approval policies from the server spec. */
       readonly toolApprovals: ToolApprovalPolicy[];
+      /** OAuth grant health at resolve time, when a lookup ran. */
+      readonly oauthConnectionHealth?: OAuthConnectionHealth;
     }
   | {
       /** Server resolved and is ready (no env vars needed). */
@@ -159,6 +175,8 @@ export type McpServerSetupAction =
       readonly toolApprovals: ToolApprovalPolicy[];
       /** Tool names enabled for this session. */
       readonly enabledTools: string[];
+      /** OAuth grant health at resolve time, when a lookup ran. */
+      readonly oauthConnectionHealth?: OAuthConnectionHealth;
     }
   | {
       /** Re-evaluate missing variables after pool values arrive. */
@@ -254,6 +272,7 @@ export function mcpServerSetupReducer(
           missingVariables: action.missingVariables,
           discoveredTools: action.discoveredTools,
           toolApprovals: action.toolApprovals,
+          oauthConnectionHealth: action.oauthConnectionHealth,
           error: null,
         },
       };
@@ -270,6 +289,7 @@ export function mcpServerSetupReducer(
           discoveredTools: action.discoveredTools,
           toolApprovals: action.toolApprovals,
           enabledTools: action.enabledTools,
+          oauthConnectionHealth: action.oauthConnectionHealth,
           error: null,
         },
       };
@@ -288,6 +308,7 @@ export function mcpServerSetupReducer(
             discoveredTools: entry.discoveredTools,
             toolApprovals: entry.toolApprovals,
             enabledTools: action.enabledTools,
+            oauthConnectionHealth: entry.oauthConnectionHealth,
             error: null,
           },
         };
@@ -313,6 +334,7 @@ export function mcpServerSetupReducer(
           missingVariables: entry.missingVariables,
           discoveredTools: entry.discoveredTools,
           toolApprovals: entry.toolApprovals,
+          oauthConnectionHealth: entry.oauthConnectionHealth,
           error: null,
         },
       };
@@ -329,6 +351,7 @@ export function mcpServerSetupReducer(
           discoveredTools: entry.discoveredTools,
           toolApprovals: entry.toolApprovals,
           enabledTools: action.enabledTools,
+          oauthConnectionHealth: entry.oauthConnectionHealth,
           error: null,
         },
       };
@@ -345,6 +368,7 @@ export function mcpServerSetupReducer(
           missingVariables: entry.missingVariables,
           discoveredTools: entry.discoveredTools,
           toolApprovals: entry.toolApprovals,
+          oauthConnectionHealth: entry.oauthConnectionHealth,
           error: action.error,
         },
       };

package/src/mcp-server/useMcpServerSetup.ts

@@ -5,6 +5,7 @@ import type { EnvVarInput, McpServerUsageInput, ResourceRef } from "@stigmer/sdk
 import { create } from "@bufbuild/protobuf";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import { GetOAuthGrantStatusInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import type { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import type { DiscoveredTool } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { useStigmer } from "../hooks.js";
@@ -287,6 +288,11 @@ export function useMcpServerSetup(
           Object.keys(personalEnv.environment?.spec?.data ?? {}),
         );
 
+        // Carried onto the entry so consumers can tell a healthy grant
+        // that merely lacks tool discovery (offer bare discovery,
+        // stigmer/stigmer#418) apart from an expired one (offer re-auth).
+        let oauthConnectionHealth: OAuthConnectionHealth | undefined;
+
         const auth = mcpServer.spec?.auth;
         if (auth?.targetEnvVar && mcpServer.metadata?.id) {
           try {
@@ -296,6 +302,7 @@ export function useMcpServerSetup(
                 org,
               }),
             );
+            oauthConnectionHealth = grantStatus.connectionHealth;
             if (grantStatus.connected) {
               existingKeys.add(auth.targetEnvVar);
             }
@@ -319,6 +326,7 @@ export function useMcpServerSetup(
               mcpServer,
               discoveredTools,
             ),
+            oauthConnectionHealth,
           });
           return;
         }
@@ -330,6 +338,7 @@ export function useMcpServerSetup(
           missingVariables: requiredMissing,
           discoveredTools,
           toolApprovals,
+          oauthConnectionHealth,
         });
       } catch (err) {
         dispatch({ type: "SET_ERROR", key, error: toError(err) });

package/src/oauth-app/OAuthAppListPanel.tsx

@@ -4,6 +4,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useOAuthAppList } from "./useOAuthAppList.js";
 
 // ---------------------------------------------------------------------------
@@ -153,9 +154,16 @@ function OAuthAppRow({
 
       <div className="stg:hidden stg:shrink-0 stg:items-center stg:gap-4 stg:text-xs stg:text-muted-foreground stg:sm:flex">
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
       </div>