@stigmer/react 3.12.1 → 3.12.2

package/src/invitation/InvitationRedemption.tsx

@@ -7,6 +7,7 @@ import type { Invitation } from "@stigmer/protos/ai/stigmer/iam/invitation/v1/ap
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { useInvitationPreview } from "./useInvitationPreview.js";
 import { useRedeemInvitation } from "./useRedeemInvitation.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -261,7 +262,7 @@ export function InvitationRedemption({
                     "stg:transition-colors",
                   )}
                 >
-                  {isRedeeming && <SpinnerIcon />}
+                  {isRedeeming && <SpinnerIcon size={14} />}
                   {isRedeeming ? "Accepting\u2026" : "Accept Invitation"}
                 </button>
                 {redeemError && (
@@ -442,20 +443,3 @@ function SuccessIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      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/library/useExportResource.ts

@@ -8,6 +8,7 @@ import type { Schedule } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/ap
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { serializeManifest } from "@stigmer/sdk";
 import { toast } from "../feedback/toast.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml.js";
 
 // ---------------------------------------------------------------------------
@@ -98,17 +99,25 @@ export function useExportResource({
     return resource.metadata?.slug || resource.metadata?.name || "resource";
   }, [resource]);
 
+  const { copy: copyText } = useCopyFeedback();
+
   const copyYaml = useCallback(async () => {
     if (!yaml) return;
-    await copyToClipboard(yaml);
-    toast.success("YAML copied to clipboard");
-  }, [yaml]);
+    if (await copyText(yaml)) {
+      toast.success("YAML copied to clipboard");
+    } else {
+      toast.error("Couldn't copy YAML");
+    }
+  }, [copyText, yaml]);
 
   const copyJson = useCallback(async () => {
     if (!json) return;
-    await copyToClipboard(json);
-    toast.success("JSON copied to clipboard");
-  }, [json]);
+    if (await copyText(json)) {
+      toast.success("JSON copied to clipboard");
+    } else {
+      toast.error("Couldn't copy JSON");
+    }
+  }, [copyText, json]);
 
   const downloadYaml = useCallback(() => {
     if (!yaml) return;
@@ -126,29 +135,6 @@ export function useExportResource({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Clipboard
-// ---------------------------------------------------------------------------
-
-async function copyToClipboard(text: string): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(text);
-  } catch {
-    fallbackCopy(text);
-  }
-}
-
-function fallbackCopy(text: string): void {
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.style.position = "fixed";
-  textarea.style.opacity = "0";
-  document.body.appendChild(textarea);
-  textarea.select();
-  document.execCommand("copy");
-  document.body.removeChild(textarea);
-}
-
 // ---------------------------------------------------------------------------
 // File download
 // ---------------------------------------------------------------------------

package/src/manifest/ApplyManifestDialog.tsx

@@ -156,7 +156,7 @@ export function ApplyManifestDialog({
       onCancel={handleCancel}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >

package/src/manifest/EditResourceYamlDialog.tsx

@@ -116,7 +116,7 @@ export function EditResourceYamlDialog({
       onCancel={handleCancel}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >

package/src/mcp-server/DefinitionDriftNotice.tsx

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

package/src/mcp-server/McpServerConnectDialog.tsx

@@ -124,7 +124,7 @@ export function McpServerConnectDialog({
       onClick={handleBackdropClick}
       className={cn(
         "stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-md stg:overflow-visible stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-0 stg:text-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
         className,
       )}
     >

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);
+  });
+});