@stigmer/react 3.12.0 → 3.12.2

package/src/invitation/InvitationCreatedAlert.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,24 +49,14 @@ export function InvitationCreatedAlert({
   onDismiss,
   className,
 }: InvitationCreatedAlertProps) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(inviteUrl);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      const el = document.getElementById("stgm-invite-url-reveal");
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [inviteUrl]);
+    if (await copy(inviteUrl)) return;
+    // Rejected write: select the revealed URL so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, inviteUrl]);
 
   return (
     <div
@@ -99,7 +91,7 @@ export function InvitationCreatedAlert({
 
       <div className="stg:flex stg:items-center stg:gap-2">
         <code
-          id="stgm-invite-url-reveal"
+          ref={revealRef}
           className={cn(
             "stg:min-w-0 stg:flex-1 stg:select-all stg:truncate stg:rounded-md",
             "stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5",

package/src/invitation/InvitationManager.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { useCallback, useId, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import {
   getUserMessage,
@@ -17,6 +17,8 @@ import { useRevokeInvitation } from "./useRevokeInvitation.js";
 import { InvitationCreatedAlert } from "./InvitationCreatedAlert.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { RoleSelector } from "../iam-policy/RoleSelector.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -230,6 +232,7 @@ function CreateInvitationForm({
   onCancel: () => void;
 }) {
   const { create, isCreating, error, clearError } = useCreateInvitation();
+  const baseId = useId();
 
   const [label, setLabel] = useState("");
   const [role, setRole] = useState<IamRole>(IamRole.viewer);
@@ -266,14 +269,14 @@ function CreateInvitationForm({
       {/* Label */}
       <div className="stg:space-y-1">
         <label
-          htmlFor="stgm-new-invite-label"
+          htmlFor={`${baseId}-label`}
           className="stg:text-xs stg:font-medium stg:text-foreground"
         >
           Label{" "}
           <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </label>
         <input
-          id="stgm-new-invite-label"
+          id={`${baseId}-label`}
           type="text"
           value={label}
           onChange={(e) => setLabel(e.target.value)}
@@ -304,9 +307,12 @@ function CreateInvitationForm({
           Expires in
         </legend>
         <div className="stg:flex stg:flex-wrap stg:gap-2">
+          {/* Radio-group names are minted per mount: a hardcoded name would
+              merge two mounted forms into one keyboard group. */}
           {EXPIRY_OPTIONS.map(({ value, label: optLabel }) => (
             <ExpiryRadio
               key={value}
+              name={`${baseId}-expiry`}
               value={value}
               label={optLabel}
               checked={expiry === value}
@@ -324,6 +330,7 @@ function CreateInvitationForm({
         </legend>
         <div className="stg:flex stg:flex-wrap stg:gap-2">
           <RedemptionRadio
+            name={`${baseId}-redemption`}
             value="unlimited"
             label="Unlimited"
             description="Anyone with the link can join"
@@ -332,6 +339,7 @@ function CreateInvitationForm({
             onChange={setRedemptionMode}
           />
           <RedemptionRadio
+            name={`${baseId}-redemption`}
             value="single"
             label="Single use"
             description="One person only"
@@ -358,7 +366,7 @@ function CreateInvitationForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create invite link
         </button>
 
@@ -398,7 +406,7 @@ function InvitationRow({
   onCancelRevoke: () => void;
   onRevoked: () => void;
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
 
   const id = invitation.metadata?.id ?? "";
   const label = invitation.spec?.label || invitation.metadata?.name || "Unnamed invite";
@@ -410,15 +418,9 @@ function InvitationRow({
   const expiresAt = invitation.spec?.expiresAt;
   const isActive = state === InvitationState.active;
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(buildInviteUrl(token));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // silently fail — copy is a convenience, not critical
-    }
-  }, [token, buildInviteUrl]);
+  const handleCopy = useCallback(() => {
+    void copy(buildInviteUrl(token));
+  }, [copy, token, buildInviteUrl]);
 
   if (isRevoking) {
     return (
@@ -572,7 +574,7 @@ function RevokeConfirmation({
             "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
-          {isRevoking && <SpinnerIcon />}
+          {isRevoking && <SpinnerIcon size={12} />}
           Revoke
         </button>
         <button
@@ -638,12 +640,14 @@ const STATE_BADGE_CONFIG: Record<InvitationState, { label: string; className: st
 // ---------------------------------------------------------------------------
 
 function ExpiryRadio({
+  name,
   value,
   label,
   checked,
   disabled,
   onChange,
 }: {
+  name: string;
   value: ExpiryOption;
   label: string;
   checked: boolean;
@@ -662,7 +666,7 @@ function ExpiryRadio({
     >
       <input
         type="radio"
-        name="stgm-invite-expiry"
+        name={name}
         value={value}
         checked={checked}
         disabled={disabled}
@@ -675,6 +679,7 @@ function ExpiryRadio({
 }
 
 function RedemptionRadio({
+  name,
   value,
   label,
   description,
@@ -682,6 +687,7 @@ function RedemptionRadio({
   disabled,
   onChange,
 }: {
+  name: string;
   value: RedemptionMode;
   label: string;
   description: string;
@@ -701,7 +707,7 @@ function RedemptionRadio({
     >
       <input
         type="radio"
-        name="stgm-invite-redemption"
+        name={name}
         value={value}
         checked={checked}
         disabled={disabled}
@@ -836,20 +842,3 @@ function RevokeIcon() {
   );
 }
 
-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/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,
       )}
     >
@@ -344,6 +344,7 @@ function ConnectDialogContent({
           onSignIn={handleOAuthSignIn}
           isVendorApprovalBlocked={creds.isVendorApprovalBlocked}
           isVendorApprovalPending={creds.isVendorApprovalPending}
+          isOrgOAuthApp={creds.isOrgOAuthApp}
           manualEntrySupported={creds.manualEntrySupported}
           canBringOwnApp={creds.canBringOwnApp}
           vendorApprovalDocsUrl={creds.vendorApprovalDocsUrl}
@@ -459,6 +460,7 @@ function OAuthSection({
   onSignIn,
   isVendorApprovalBlocked,
   isVendorApprovalPending,
+  isOrgOAuthApp,
   manualEntrySupported,
   canBringOwnApp,
   vendorApprovalDocsUrl,
@@ -471,6 +473,14 @@ function OAuthSection({
   readonly onSignIn: () => void;
   readonly isVendorApprovalBlocked: boolean;
   readonly isVendorApprovalPending: boolean;
+  /**
+   * `true` when the org's own BYOA OAuth app is the effective one. The
+   * vendor-approval block describes the PLATFORM app, so it neither
+   * disables sign-in nor warrants the blocked notice when the org's own
+   * app is what sign-in will use (the caller-side org-override gate the
+   * notice's contract expects).
+   */
+  readonly isOrgOAuthApp: boolean;
   readonly manualEntrySupported: boolean;
   readonly canBringOwnApp: boolean;
   readonly vendorApprovalDocsUrl: string | null;
@@ -502,7 +512,9 @@ function OAuthSection({
       <button
         type="button"
         onClick={onSignIn}
-        disabled={disabled || isInProgress || isVendorApprovalBlocked}
+        disabled={
+          disabled || isInProgress || (isVendorApprovalBlocked && !isOrgOAuthApp)
+        }
         className={cn(
           "stg:inline-flex stg:w-full stg:items-center stg:justify-center stg:gap-2 stg:rounded-md stg:px-4 stg:py-2 stg:text-sm stg:font-medium",
           "stg:bg-primary stg:text-primary-foreground",
@@ -512,17 +524,23 @@ function OAuthSection({
         )}
       >
         {isInProgress && <LoadingSpinner size="sm" />}
-        {isInProgress ? (phaseLabel[phase] ?? "Connecting...") : "Sign in with OAuth"}
+        {isInProgress
+          ? (phaseLabel[phase] ?? "Connecting...")
+          : isOrgOAuthApp
+            ? "Sign in with your app"
+            : "Sign in with OAuth"}
       </button>
-      <VendorApprovalBlockedNotice
-        blocked={isVendorApprovalBlocked}
-        pending={isVendorApprovalPending}
-        manualEntrySupported={manualEntrySupported}
-        canBringOwnApp={canBringOwnApp}
-        docsUrl={vendorApprovalDocsUrl}
-        onBringOwnApp={onOpenDetails}
-        className="stg:rounded-md stg:border stg:border-amber-500/20"
-      />
+      {!isOrgOAuthApp && (
+        <VendorApprovalBlockedNotice
+          blocked={isVendorApprovalBlocked}
+          pending={isVendorApprovalPending}
+          manualEntrySupported={manualEntrySupported}
+          canBringOwnApp={canBringOwnApp}
+          docsUrl={vendorApprovalDocsUrl}
+          onBringOwnApp={onOpenDetails}
+          className="stg:rounded-md stg:border stg:border-amber-500/20"
+        />
+      )}
       {onSwitchToManual && (
         <button
           type="button"