@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/mcp-server/OAuthAppForm.tsx

@@ -93,13 +93,13 @@ export function OAuthAppForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className={cn("flex flex-col gap-4", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4", className)}
     >
       {/* Instructions */}
-      <div className="space-y-1.5">
-        <p className="text-sm text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-sm stg:text-foreground">
           Register an OAuth app with{" "}
-          <span className="font-medium">{providerName}</span> and enter your
+          <span className="stg:font-medium">{providerName}</span> and enter your
           credentials below.
         </p>
         {vendorDocsUrl && (
@@ -107,18 +107,18 @@ export function OAuthAppForm({
             href={vendorDocsUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-primary underline decoration-primary/40 underline-offset-2 hover:decoration-primary"
+            className="stg:inline-flex stg:items-center stg:gap-1 stg:text-xs stg:text-primary stg:underline stg:decoration-primary/40 stg:underline-offset-2 stg:hover:decoration-primary"
           >
             {providerName} OAuth app registration
-            <ExternalLinkIcon className="size-3 shrink-0" />
+            <ExternalLinkIcon className="stg:size-3 stg:shrink-0" />
           </a>
         )}
       </div>
 
       {/* Fields */}
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-1.5">
-          <label htmlFor={clientIdId} className="text-xs font-medium text-foreground">
+      <div className="stg:flex stg:flex-col stg:gap-3">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
+          <label htmlFor={clientIdId} className="stg:text-xs stg:font-medium stg:text-foreground">
             Client ID
           </label>
           <input
@@ -133,19 +133,19 @@ export function OAuthAppForm({
             autoFocus
             placeholder="e.g. 1234567890abcdef"
             className={cn(
-              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           />
         </div>
 
-        <div className="flex flex-col gap-1.5">
-          <label htmlFor={clientSecretId} className="text-xs font-medium text-foreground">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
+          <label htmlFor={clientSecretId} className="stg:text-xs stg:font-medium stg:text-foreground">
             Client Secret
           </label>
-          <div className="relative">
+          <div className="stg:relative">
             <input
               id={clientSecretId}
               type={secretRevealed ? "text" : "password"}
@@ -157,10 +157,10 @@ export function OAuthAppForm({
               autoComplete="off"
               placeholder="Your client secret"
               className={cn(
-                "w-full rounded-md border border-input bg-background px-2.5 py-1.5 pr-8 text-xs text-foreground",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:pointer-events-none disabled:opacity-50",
+                "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:pr-8 stg:text-xs stg:text-foreground",
+                "stg:placeholder:text-muted-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
             />
             <button
@@ -168,9 +168,9 @@ export function OAuthAppForm({
               onClick={() => setSecretRevealed((v) => !v)}
               disabled={isDisabled}
               className={cn(
-                "absolute right-2 top-1/2 -translate-y-1/2",
-                "text-muted-foreground hover:text-foreground",
-                "disabled:pointer-events-none disabled:opacity-50",
+                "stg:absolute stg:right-2 stg:top-1/2 stg:-translate-y-1/2",
+                "stg:text-muted-foreground stg:hover:text-foreground",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
               aria-label={secretRevealed ? "Hide client secret" : "Show client secret"}
               tabIndex={-1}
@@ -185,22 +185,22 @@ export function OAuthAppForm({
       {error && (
         <div
           role="alert"
-          className="rounded-md border border-destructive/30 bg-destructive-subtle px-2.5 py-2 text-xs text-destructive"
+          className="stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-2.5 stg:py-2 stg:text-xs stg:text-destructive"
         >
           {getUserMessage(error)}
         </div>
       )}
 
       {/* Actions */}
-      <div className="flex items-center justify-end gap-2">
+      <div className="stg:flex stg:items-center stg:justify-end stg:gap-2">
         <button
           type="button"
           onClick={onCancel}
           disabled={isDisabled}
           className={cn(
-            "rounded-md px-3 py-1.5 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           Cancel
@@ -209,9 +209,9 @@ export function OAuthAppForm({
           type="submit"
           disabled={!canSubmit || isDisabled}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isSubmitting && <SpinnerIcon />}
@@ -295,7 +295,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/mcp-server/OAuthCallbackHandler.tsx

@@ -153,22 +153,22 @@ export function OAuthCallbackHandler({
   return (
     <div
       className={cn(
-        "flex min-h-[200px] items-center justify-center p-8",
+        "stg:flex stg:min-h-[200px] stg:items-center stg:justify-center stg:p-8",
         className,
       )}
     >
-      <div className="max-w-sm text-center">
+      <div className="stg:max-w-sm stg:text-center">
         {status === "processing" && (
           <>
             <Spinner />
-            <p className="mt-3 text-sm text-muted-foreground">
+            <p className="stg:mt-3 stg:text-sm stg:text-muted-foreground">
               Completing authentication...
             </p>
           </>
         )}
 
         {status === "done" && (
-          <p className="text-sm text-muted-foreground">
+          <p className="stg:text-sm stg:text-muted-foreground">
             Authentication complete. You can close this window.
           </p>
         )}
@@ -176,10 +176,10 @@ export function OAuthCallbackHandler({
         {status === "no-opener" && (
           <>
             <CheckIcon />
-            <p className="mt-3 text-sm font-medium text-foreground">
+            <p className="stg:mt-3 stg:text-sm stg:font-medium stg:text-foreground">
               Authentication successful
             </p>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
               Please close this tab and return to the application to continue.
             </p>
           </>
@@ -188,11 +188,11 @@ export function OAuthCallbackHandler({
         {status === "error" && (
           <>
             <WarningIcon />
-            <p className="mt-3 text-sm font-medium text-destructive">
+            <p className="stg:mt-3 stg:text-sm stg:font-medium stg:text-destructive">
               Authentication failed
             </p>
             {errorMessage && (
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
                 {errorMessage}
               </p>
             )}
@@ -217,7 +217,7 @@ function Spinner() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="mx-auto animate-spin text-muted-foreground"
+      className="stg:mx-auto stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -236,7 +236,7 @@ function CheckIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="mx-auto text-success"
+      className="stg:mx-auto stg:text-success"
       aria-hidden="true"
     >
       <path d="m3 8.5 3.5 3.5 6.5-8" />
@@ -255,7 +255,7 @@ function WarningIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="mx-auto text-destructive"
+      className="stg:mx-auto stg:text-destructive"
       aria-hidden="true"
     >
       <path d="M8 1.5 1 14h14L8 1.5Z" />

package/src/mcp-server/OAuthRequiredNotice.tsx

@@ -40,12 +40,12 @@ export function OAuthRequiredNotice({
     <div
       role="status"
       className={cn(
-        "bg-muted-subtle text-muted-foreground flex items-start gap-2.5 rounded-lg border border-transparent px-4 py-3",
+        "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,
       )}
     >
-      <KeyIcon className="mt-0.5 size-4 shrink-0" />
-      <p className="text-xs leading-relaxed">
+      <KeyIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+      <p className="stg:text-xs stg:leading-relaxed">
         This server requires OAuth. Sign in to connect — its hosted endpoint
         rejects manually-entered API tokens, so a pasted token won&apos;t work
         here.

package/src/mcp-server/StdioSandboxNotice.tsx

@@ -63,12 +63,12 @@ export function StdioSandboxNotice({
     <div
       role="status"
       className={cn(
-        "bg-muted-subtle text-muted-foreground flex items-start gap-2.5 rounded-lg border border-transparent px-4 py-3",
+        "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,
       )}
     >
-      <SandboxIcon className="mt-0.5 size-4 shrink-0" />
-      <p className="text-xs leading-relaxed">
+      <SandboxIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+      <p className="stg:text-xs stg:leading-relaxed">
         This stdio server runs only on local runners — it won&apos;t be
         available to sessions on Stigmer-managed cloud compute. Run the
         session on a local runner (desktop app or CLI) to use it, or choose

package/src/mcp-server/VendorApprovalBlockedNotice.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link VendorApprovalBlockedNotice}. */
+export interface VendorApprovalBlockedNoticeProps {
+  /**
+   * `true` when the platform OAuth app's vendor approval is PENDING or
+   * REJECTED — the platform-managed sign-in flow is blocked. The notice
+   * renders `null` when `false`.
+   */
+  readonly blocked: boolean;
+  /**
+   * `true` when the approval is PENDING (awaiting review), `false` when
+   * REJECTED. Only consulted while `blocked` — it picks the honest status
+   * sentence, since "awaiting approval" is a lie for a rejected app.
+   */
+  readonly pending: boolean;
+  /**
+   * Whether a manually-entered static token can authenticate this server
+   * (`false` for `oauth_only` servers). Gates the "enter a token manually"
+   * mention — recommending it on an `oauth_only` server sends the user
+   * down a path that cannot succeed (stigmer/stigmer#412).
+   */
+  readonly manualEntrySupported: boolean;
+  /**
+   * Whether the BYOA path is relevant for this server (vendor OAuth with
+   * no org override active). Gates the "use your own OAuth app" mention.
+   */
+  readonly canBringOwnApp: boolean;
+  /**
+   * Documentation URL for bringing your own OAuth credentials, or `null`.
+   * Linked when BYOA is not offered inline — when it is, the BYOA form
+   * itself carries the link, and doubling it here would only add noise.
+   */
+  readonly docsUrl: string | null;
+  /**
+   * Renders the "Use your own OAuth app" call-to-action when provided
+   * together with `canBringOwnApp`. Surfaces that host the BYOA form
+   * open it in place; the connect dialog navigates to the detail page
+   * where the form lives.
+   */
+  readonly onBringOwnApp?: () => void;
+  /**
+   * Dense rendering for tight surfaces (the session-setup config panel):
+   * smaller type, no icon, no tinted container.
+   */
+  readonly compact?: boolean;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Explains why the platform-managed OAuth sign-in is blocked by vendor
+ * approval and — critically — what the user can do instead.
+ *
+ * This is the single source of truth for the blocked-state message: the
+ * connect dialog, the server detail page, and the session-setup config
+ * panel all render this component instead of hand-rolling the copy.
+ * Before extraction each surface drifted independently — the dialog could
+ * show a disabled button with no explanation at all, and two surfaces
+ * recommended manual token entry on servers whose endpoint rejects static
+ * tokens (stigmer/stigmer#412).
+ *
+ * The alternative-path sentence is derived from what is actually
+ * available, never asserted: manual entry only when the endpoint accepts
+ * static tokens, BYOA only when the server uses vendor OAuth without an
+ * org override. When nothing is available the notice still explains the
+ * state — a disabled control must never be the only signal (Nielsen:
+ * visibility of system status).
+ *
+ * Self-gating: renders `null` unless `blocked`. Callers keep their own
+ * situational gates (connected state, org-override state) and render this
+ * unconditionally inside them, mirroring {@link OAuthRequiredNotice}.
+ *
+ * All visual properties flow through `--stgm-*` design tokens except the
+ * amber warning palette, which matches the pre-existing vendor-approval
+ * treatment across the MCP surfaces. No Console-specific dependencies —
+ * safe for platform-builder embedding.
+ */
+export function VendorApprovalBlockedNotice({
+  blocked,
+  pending,
+  manualEntrySupported,
+  canBringOwnApp,
+  docsUrl,
+  onBringOwnApp,
+  compact,
+  className,
+}: VendorApprovalBlockedNoticeProps) {
+  if (!blocked) return null;
+
+  const statusSentence = pending
+    ? "The platform's OAuth app is awaiting vendor approval."
+    : "The platform's OAuth app was not approved by the vendor.";
+
+  const alternativeSentence = canBringOwnApp
+    ? manualEntrySupported
+      ? "You can use your own OAuth app or enter a token manually."
+      : "You can use your own OAuth app."
+    : manualEntrySupported
+      ? "You can still connect by entering your own token manually."
+      : "OAuth sign-in is temporarily unavailable for this server.";
+
+  const showBringOwnApp = canBringOwnApp && onBringOwnApp;
+  // When BYOA is offered inline the form carries the docs link itself.
+  const showDocsLink = Boolean(docsUrl) && !canBringOwnApp;
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          "stg:text-[0.65rem] stg:text-amber-700 stg:dark:text-amber-300",
+          className,
+        )}
+      >
+        <p>
+          {statusSentence} {alternativeSentence}
+        </p>
+        {showBringOwnApp && (
+          <button
+            type="button"
+            onClick={onBringOwnApp}
+            className="stg:mt-1 stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:bg-amber-600 stg:px-2 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:text-white stg:hover:bg-amber-700 stg:dark:bg-amber-500 stg:dark:text-amber-950 stg:dark:hover:bg-amber-400"
+          >
+            Use your own OAuth app
+          </button>
+        )}
+        {showDocsLink && (
+          <a
+            href={docsUrl ?? undefined}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="stg:underline stg:decoration-amber-600/40 stg:underline-offset-2 stg:hover:decoration-amber-600 stg:dark:decoration-amber-400/40 stg:dark:hover:decoration-amber-400"
+          >
+            Learn how to bring your own token
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="status"
+      className={cn(
+        "stg:flex stg:items-start stg:gap-2 stg:bg-amber-500/5 stg:px-3 stg:py-2",
+        className,
+      )}
+    >
+      <WarningIcon className="stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-amber-600 stg:dark:text-amber-400" />
+      <div className="stg:flex-1 stg:text-xs stg:text-amber-700 stg:dark:text-amber-300">
+        <p>
+          {statusSentence} {alternativeSentence}
+        </p>
+        {showBringOwnApp && (
+          <button
+            type="button"
+            onClick={onBringOwnApp}
+            data-cursor-target="byoa-cta-button"
+            className="stg:mt-1.5 stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:bg-amber-600 stg:px-2.5 stg:py-1 stg:text-[11px] stg:font-medium stg:text-white stg:hover:bg-amber-700 stg:dark:bg-amber-500 stg:dark:text-amber-950 stg:dark:hover:bg-amber-400"
+          >
+            Use your own OAuth app
+          </button>
+        )}
+        {showDocsLink && (
+          <a
+            href={docsUrl ?? undefined}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="stg:mt-1 stg:inline-flex stg:items-center stg:gap-1 stg:underline stg:decoration-amber-600/40 stg:underline-offset-2 stg:hover:decoration-amber-600 stg:dark:decoration-amber-400/40 stg:dark:hover:decoration-amber-400"
+          >
+            Learn how to bring your own token
+            <ExternalLinkIcon className="stg:size-3 stg:shrink-0" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Icon paths are verbatim copies of McpServerDetailView's private icons so
+// the extracted banner renders pixel-identically to the one it replaces
+// (the byoa-setup docs tour snapshots the blocked state).
+function WarningIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 1.5 1 14h14L8 1.5Z" />
+      <path d="M8 6v3.5" />
+      <circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 8.667v4A1.333 1.333 0 0 1 10.667 14H3.333A1.333 1.333 0 0 1 2 12.667V5.333A1.333 1.333 0 0 1 3.333 4h4" />
+      <path d="M10 2h4v4" />
+      <path d="M6.667 9.333 14 2" />
+    </svg>
+  );
+}