@stigmer/react 3.12.0 → 3.12.2

package/src/mcp-server/McpServerDetailView.tsx

@@ -27,6 +27,9 @@ import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect.js";
 import { StdioSandboxNotice } from "./StdioSandboxNotice.js";
 import { OAuthRequiredNotice } from "./OAuthRequiredNotice.js";
 import { VendorApprovalBlockedNotice } from "./VendorApprovalBlockedNotice.js";
+import { DefinitionDriftNotice } from "./DefinitionDriftNotice.js";
+import { useMcpServerDefinitionDrift } from "./useMcpServerDefinitionDrift.js";
+import { buildRefreshInput } from "./internal/definitionDrift.js";
 import { useDisconnectOAuth } from "./useDisconnectOAuth.js";
 import { useOrgOAuthApp } from "./useOrgOAuthApp.js";
 import { OAuthAppForm } from "./OAuthAppForm.js";
@@ -226,6 +229,50 @@ export function McpServerDetailView({
   const credentials = useMcpServerCredentials(activeOrg ?? org, mcpServer ?? null);
   const connection = useMcpServerConnect();
   const oauth = useMcpServerOAuthConnect();
+
+  // Definition drift is only checked for editable servers: the paired
+  // refresh writes to the resource, so read-only viewers (e.g. anyone
+  // browsing another org's marketplace row) have nothing to act on.
+  const { drift: definitionDrift } = useMcpServerDefinitionDrift(
+    editable ? (mcpServer ?? null) : null,
+  );
+  const [isRefreshingDefinition, setIsRefreshingDefinition] = useState(false);
+  const handleDefinitionRefresh = useCallback(async () => {
+    if (!mcpServer?.metadata?.id || !definitionDrift) return;
+    setIsRefreshingDefinition(true);
+    try {
+      const updated = await updateMcpServer(
+        buildRefreshInput(mcpServer, definitionDrift.template),
+      );
+      onResourceUpdated?.(updated);
+      // The update RPC does not re-run discovery (only apply does), so
+      // reconnect explicitly — the refreshed transport/auth configuration
+      // is exactly what discovery needs to be retried against.
+      const envKeys = Object.keys(updated.spec?.env ?? {});
+      await connection.connect(
+        updated.metadata!.id,
+        activeOrg ?? org,
+        undefined,
+        envKeys,
+      );
+    } catch {
+      // Update errors surface through useUpdateMcpServer's error state;
+      // a failed re-discovery lands in connection.error next to the
+      // Connect button. Either way the page stays usable.
+    } finally {
+      setIsRefreshingDefinition(false);
+      refetch();
+    }
+  }, [
+    mcpServer,
+    definitionDrift,
+    updateMcpServer,
+    onResourceUpdated,
+    connection,
+    activeOrg,
+    org,
+    refetch,
+  ]);
   const disconnectOAuth = useDisconnectOAuth();
   const orgOAuthApp = useOrgOAuthApp(
     mcpServer?.metadata?.id ?? null,
@@ -588,6 +635,12 @@ export function McpServerDetailView({
       {/* scrollTarget: guided tours/demos bring the connect flow into view
           (see IdentityTransportStep's "mcp-transport" for the convention). */}
       <Section title="Connection" scrollTarget="mcp-connection">
+        <DefinitionDriftNotice
+          drift={definitionDrift}
+          onRefresh={handleDefinitionRefresh}
+          isRefreshing={isRefreshingDefinition}
+          className="stg:mb-3"
+        />
         <StdioSandboxNotice serverType={spec?.serverType} className="stg:mb-3" />
         <OAuthRequiredNotice oauthOnly={spec?.auth?.oauthOnly} className="stg:mb-3" />
         <ConnectBar
@@ -659,7 +712,7 @@ export function McpServerDetailView({
         onCancel={handleByoaDialogCancel}
         className={cn(
           "stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-6 stg:shadow-lg",
-          "stg:backdrop:bg-black/50",
+          "stg:backdrop:bg-backdrop",
         )}
       >
         <h3 className="stg:mb-4 stg:text-base stg:font-semibold stg:text-foreground">
@@ -710,7 +763,7 @@ export function McpServerDetailView({
       </Section>
 
       {(editable || (spec && spec.tags.length > 0)) && (
-        <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
+        <TagsSection tags={spec?.tags ?? []} editable={editable} />
       )}
     </ResourceDetailShell>
     {access.dialog}
@@ -1836,34 +1889,13 @@ function EnvSection({
 function TagsSection({
   tags,
   editable,
-  isSaving,
-  saveMcpField,
 }: {
   readonly tags: readonly string[];
   readonly editable?: boolean;
-  readonly isSaving?: boolean;
-  readonly saveMcpField?: <K extends keyof import("@stigmer/sdk").McpServerInput>(
-    field: K,
-    value: import("@stigmer/sdk").McpServerInput[K],
-  ) => Promise<boolean>;
 }) {
-  const tagRows: KeyValueRow[] = useMemo(
-    () => tags.map((t) => ({ key: t, value: "" })),
-    [tags],
-  );
-
-  const handleTagsSave = useCallback(
-    async (rows: KeyValueRow[]) => {
-      if (!saveMcpField) return false;
-      // Tags are stored as string[] on the spec but not directly on McpServerInput.
-      // For now, save them through the full input by modifying the spec.
-      // Tags don't have a direct field on McpServerInput, so we handle this at
-      // a higher level if needed. For now, show read-only in edit mode.
-      return false;
-    },
-    [saveMcpField],
-  );
-
+  // Display-only by design: tags are curated marketplace categorization,
+  // not per-connection state. (McpServerInput does carry `tags`, so an
+  // editing affordance is unblocked if the product ever wants one.)
   return (
     <Section title="Tags" count={tags.length}>
       <div className="stg:flex stg:flex-wrap stg:gap-1.5 stg:p-3">

package/src/mcp-server/OAuthAppForm.tsx

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

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

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

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

@@ -5,7 +5,10 @@ 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 {
+  GetOAuthGrantStatusOutputSchema,
+  GetOrgOAuthAppOutputSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import {
   McpServerSpecSchema,
   McpServerAuthSchema,
@@ -14,7 +17,6 @@ import {
 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";
@@ -53,8 +55,11 @@ 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.
+ * `withAppRef` controls the BYOA arm: with a ref and no org override,
+ * `canBringOwnApp` is true. The org-override state itself comes from the
+ * `getOrgOAuthApp` transport handler (client-side derivation,
+ * stigmer-cloud#401) — status.oauth_status carries only the
+ * vendor-approval fields, matching what backends actually populate.
  */
 function buildBlockedOAuthOnlyServer(options: {
   status: VendorApprovalStatus;
@@ -86,7 +91,6 @@ function buildBlockedOAuthOnlyServer(options: {
     oauthStatus: create(OAuthStatusSchema, {
       vendorApprovalStatus: options.status,
       vendorApprovalDocsUrl: DOCS_URL,
-      effectiveOauthSource: OAuthAppSource.OAUTH_APP_SOURCE_PLATFORM,
     }),
   });
   return server;
@@ -96,6 +100,15 @@ function noGrant() {
   return create(GetOAuthGrantStatusOutputSchema, { connected: false });
 }
 
+// BYOA affordances render only where the org-override surface exists —
+// canBringOwnApp is gated on a getOrgOAuthApp capability probe
+// (stigmer/stigmer#558), so the BYOA arms of these tests must register the
+// RPC to simulate the hosted edition. The OSS arm (probe UNIMPLEMENTED →
+// affordances hidden) is pinned in byoaEditionDegradation.test.tsx.
+function noOverride() {
+  return create(GetOrgOAuthAppOutputSchema, { hasOverride: false });
+}
+
 function renderWithTransport(
   ui: ReactNode,
   register: Parameters<typeof createRouterTransport>[0] = () => {},
@@ -128,6 +141,7 @@ describe("McpServerConnectDialog — oauth_only + vendor-blocked", () => {
         router.service(McpServerQueryController, {
           getByReference: () => server,
           getOAuthGrantStatus: noGrant,
+          getOrgOAuthApp: noOverride,
         });
       },
     );
@@ -199,6 +213,48 @@ describe("McpServerConnectDialog — oauth_only + vendor-blocked", () => {
     });
     expect(docs.getAttribute("href")).toBe(DOCS_URL);
   });
+
+  it("enables sign-in with the org's own app when a BYOA override is active", async () => {
+    // The platform app is still vendor-blocked, but the org brought its
+    // own approved app — the block describes an app sign-in won't use
+    // (stigmer-cloud#401). Before the client-side derivation this state
+    // was a dead end: disabled button AND no way forward.
+    renderWithTransport(
+      <McpServerConnectDialog
+        org={ORG}
+        slug={SLUG}
+        open
+        onClose={() => {}}
+      />,
+      (router) => {
+        router.service(McpServerQueryController, {
+          getByReference: () =>
+            buildBlockedOAuthOnlyServer({
+              status: VendorApprovalStatus.PENDING,
+              withAppRef: true,
+            }),
+          getOAuthGrantStatus: noGrant,
+          getOrgOAuthApp: () =>
+            create(GetOrgOAuthAppOutputSchema, {
+              hasOverride: true,
+              oauthAppId: "oauthapp_01acme",
+              clientId: "acme-client-id",
+            }),
+        });
+      },
+    );
+
+    const signIn = await screen.findByRole("button", {
+      name: "Sign in with your app",
+    });
+    expect((signIn as HTMLButtonElement).disabled).toBe(false);
+    // The blocked notice describes the platform app — suppressed while
+    // the org's own app is the effective one.
+    expect(screen.queryByText(/awaiting vendor approval/)).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Use your own OAuth app" }),
+    ).toBeNull();
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -231,6 +287,7 @@ describe("McpServerDetailView — oauth_only + vendor-blocked", () => {
       (router) => {
         router.service(McpServerQueryController, {
           getOAuthGrantStatus: noGrant,
+          getOrgOAuthApp: noOverride,
         });
       },
     );
@@ -252,6 +309,47 @@ describe("McpServerDetailView — oauth_only + vendor-blocked", () => {
     // extraction into the shared notice.
     expect(cta.getAttribute("data-cursor-target")).toBe("byoa-cta-button");
   });
+
+  it("enables 'Sign in with your app' when the org's BYOA override is active", async () => {
+    // The vendor block gates the PLATFORM app; with the org's own app
+    // effective, sign-in must be enabled and the BYOA CTA retired
+    // (stigmer-cloud#401 — the signal these gates key on never fired).
+    renderWithTransport(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(
+          buildBlockedOAuthOnlyServer({
+            status: VendorApprovalStatus.PENDING,
+            withAppRef: true,
+          }),
+        )}
+      />,
+      (router) => {
+        router.service(McpServerQueryController, {
+          getOAuthGrantStatus: noGrant,
+          getOrgOAuthApp: () =>
+            create(GetOrgOAuthAppOutputSchema, {
+              hasOverride: true,
+              oauthAppId: "oauthapp_01acme",
+              clientId: "acme-client-id",
+            }),
+        });
+      },
+    );
+
+    const signIn = await screen.findByRole("button", {
+      name: "Sign in with your app",
+    });
+    expect((signIn as HTMLButtonElement).disabled).toBe(false);
+    expect(screen.getByText("Using your OAuth app")).toBeTruthy();
+    // The blocked banner and BYOA offer describe the platform app —
+    // both retire while the override is active.
+    expect(screen.queryByText(/awaiting vendor approval/)).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Use your own OAuth app" }),
+    ).toBeNull();
+  });
 });
 
 // ---------------------------------------------------------------------------