@stigmer/react 3.1.6 → 3.1.8

package/src/library/visibilityLevels.ts

@@ -143,6 +143,42 @@ export const INSTANCE_VISIBILITY_LEVELS: readonly VisibilityLevelOption[] = [
   },
 ];
 
+/**
+ * The levels an environment selector offers, in escalation order:
+ * Private / Organization. Broader levels are structurally absent —
+ * secret values never leave the org boundary (the backend rejects
+ * public/platform via the kind's VisibilityConfig).
+ *
+ * Org sharing on an environment carries credential semantics, so the
+ * copy names both effects: members get redacted view, and executions
+ * in the org (teammate-run agents AND shared-agent visitors) can use
+ * the values at runtime. Secret reveal stays creator-only at every
+ * level.
+ *
+ * In `local` mode (OSS Go backend, single-user) sharing has no
+ * enforcement meaning, so no interactive levels are offered —
+ * {@link ResourceVisibilityControl} degrades to a read-only badge.
+ */
+export function environmentVisibilityLevels(
+  deploymentMode: "cloud" | "local",
+): readonly VisibilityLevelOption[] {
+  if (deploymentMode === "local") {
+    return [PRIVATE_OPTION];
+  }
+  return [
+    {
+      ...PRIVATE_OPTION,
+      description: "Only you can view and use these credentials",
+    },
+    {
+      ...ORG_OPTION,
+      description:
+        "Agents run in your org — including shared-agent visitors — can use these credentials. Members see names only; secret values stay hidden.",
+      confirmPrompt: "Let agents run in your org use these credentials?",
+    },
+  ];
+}
+
 /**
  * Canonical option for a visibility value, independent of any kind's offered
  * list. Used to render the current level even when it is not offerable in

package/src/mcp-server/McpServerConnectDialog.tsx

@@ -11,6 +11,8 @@ import { useMcpServerConnect } from "./useMcpServerConnect.js";
 import { useDisconnectOAuth } from "./useDisconnectOAuth.js";
 import { EnvVarForm } from "../environment/EnvVarForm.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
+import { StdioSandboxNotice } from "./StdioSandboxNotice.js";
+import { OAuthRequiredNotice } from "./OAuthRequiredNotice.js";
 
 /** Props for {@link McpServerConnectDialog}. */
 export interface McpServerConnectDialogProps {
@@ -276,6 +278,9 @@ function ConnectDialogContent({
         </p>
       )}
 
+      <StdioSandboxNotice serverType={mcpServer.spec?.serverType} className="mb-4" />
+      <OAuthRequiredNotice oauthOnly={mcpServer.spec?.auth?.oauthOnly} className="mb-4" />
+
       {activeError && (
         <div className="mb-4">
           <ErrorMessage
@@ -295,7 +300,11 @@ function ConnectDialogContent({
           phase={oauth.phase}
           onSignIn={handleOAuthSignIn}
           isVendorApprovalBlocked={creds.isVendorApprovalBlocked}
-          onSwitchToManual={() => creds.setManualOverride(true)}
+          onSwitchToManual={
+            creds.manualEntrySupported
+              ? () => creds.setManualOverride(true)
+              : undefined
+          }
           disabled={isConnectingPhase}
         />
       )}
@@ -408,7 +417,8 @@ function OAuthSection({
   readonly phase: OAuthConnectPhase;
   readonly onSignIn: () => void;
   readonly isVendorApprovalBlocked: boolean;
-  readonly onSwitchToManual: () => void;
+  /** When omitted (e.g. `oauth_only` servers), no manual-entry link is shown. */
+  readonly onSwitchToManual?: () => void;
   readonly disabled?: boolean;
 }) {
   if (isConnected) {
@@ -445,19 +455,21 @@ function OAuthSection({
         {isInProgress && <LoadingSpinner size="sm" />}
         {isInProgress ? (phaseLabel[phase] ?? "Connecting...") : "Sign in with OAuth"}
       </button>
-      {isVendorApprovalBlocked && (
+      {isVendorApprovalBlocked && onSwitchToManual && (
         <p className="text-xs text-muted-foreground">
           OAuth sign-in is pending vendor approval. You can enter your token manually instead.
         </p>
       )}
-      <button
-        type="button"
-        onClick={onSwitchToManual}
-        disabled={disabled || isInProgress}
-        className="text-xs text-muted-foreground underline hover:text-foreground"
-      >
-        Enter token manually
-      </button>
+      {onSwitchToManual && (
+        <button
+          type="button"
+          onClick={onSwitchToManual}
+          disabled={disabled || isInProgress}
+          className="text-xs text-muted-foreground underline hover:text-foreground"
+        >
+          Enter token manually
+        </button>
+      )}
     </div>
   );
 }

package/src/mcp-server/McpServerDetailView.tsx

@@ -20,6 +20,8 @@ import { useMcpServerConnect } from "./useMcpServerConnect.js";
 import { useMcpServerCredentials } from "./useMcpServerCredentials.js";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect.js";
 import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect.js";
+import { StdioSandboxNotice } from "./StdioSandboxNotice.js";
+import { OAuthRequiredNotice } from "./OAuthRequiredNotice.js";
 import { useDisconnectOAuth } from "./useDisconnectOAuth.js";
 import { useOrgOAuthApp } from "./useOrgOAuthApp.js";
 import { OAuthAppForm } from "./OAuthAppForm.js";
@@ -488,7 +490,10 @@ export function McpServerDetailView({
       )}
 
       <Section title="Connection">
+        <StdioSandboxNotice serverType={spec?.serverType} className="mb-3" />
+        <OAuthRequiredNotice oauthOnly={spec?.auth?.oauthOnly} className="mb-3" />
         <ConnectBar
+          manualEntrySupported={credentials.manualEntrySupported}
           isConnecting={connection.isConnecting || oauth.isInProgress}
           connectionError={combinedError}
           onConnect={handleConnectClick}
@@ -709,6 +714,7 @@ function ConnectBar({
   isRemovingOrgApp,
   removeOrgAppError,
   onClearRemoveOrgAppError,
+  manualEntrySupported,
   manualOverride,
   onManualOverride,
   onBackToOAuth,
@@ -742,6 +748,8 @@ function ConnectBar({
   readonly isRemovingOrgApp: boolean;
   readonly removeOrgAppError: Error | null;
   readonly onClearRemoveOrgAppError: () => void;
+  /** `false` for `oauth_only` servers — the manual-entry link is suppressed. */
+  readonly manualEntrySupported: boolean;
   readonly manualOverride: boolean;
   readonly onManualOverride: () => void;
   readonly onBackToOAuth: () => void;
@@ -1047,8 +1055,11 @@ function ConnectBar({
         </div>
       )}
 
-      {/* Secondary actions: manual entry, BYOA, back to OAuth */}
-      {authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting && (
+      {/* Secondary actions: manual entry, BYOA, back to OAuth. Suppressed
+          entirely for oauth_only servers with no BYOA option, so no empty
+          action bar renders. */}
+      {authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting &&
+        (manualOverride || manualEntrySupported || canBringOwnApp) && (
         <div className="flex items-center gap-3 border-t border-border px-3 py-1.5">
           {manualOverride ? (
             <button
@@ -1060,13 +1071,15 @@ function ConnectBar({
             </button>
           ) : (
             <>
-              <button
-                type="button"
-                onClick={onManualOverride}
-                className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
-              >
-                Enter token manually
-              </button>
+              {manualEntrySupported && (
+                <button
+                  type="button"
+                  onClick={onManualOverride}
+                  className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+                >
+                  Enter token manually
+                </button>
+              )}
               {canBringOwnApp && !isVendorApprovalBlocked && (
                 <button
                   type="button"

package/src/mcp-server/McpServerPicker.tsx

@@ -404,6 +404,8 @@ export function McpServerPicker({
     const auth = entry.mcpServer.spec?.auth;
     const oauthTargetEnvVar = auth?.targetEnvVar || null;
     const hasOAuth = !!auth;
+    // oauth_only endpoints reject static tokens — never offer manual entry.
+    const manualEntrySupported = !auth?.oauthOnly;
     const isManualOverride = manualOverrideKeys.has(view.serverKey);
 
     const entryMissingVars =
@@ -454,15 +456,16 @@ export function McpServerPicker({
           }
         : undefined;
 
-    const handleSwitchToManual = hasOAuth
-      ? () => {
-          setManualOverrideKeys((prev) => {
-            const next = new Set(prev);
-            next.add(view.serverKey);
-            return next;
-          });
-        }
-      : undefined;
+    const handleSwitchToManual =
+      hasOAuth && manualEntrySupported
+        ? () => {
+            setManualOverrideKeys((prev) => {
+              const next = new Set(prev);
+              next.add(view.serverKey);
+              return next;
+            });
+          }
+        : undefined;
 
     const handleSwitchToOAuth =
       hasOAuth && isManualOverride

package/src/mcp-server/OAuthRequiredNotice.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link OAuthRequiredNotice}. */
+export interface OAuthRequiredNoticeProps {
+  /**
+   * The server's `spec.auth.oauth_only` flag. When `true`, the endpoint
+   * rejects manually-entered static tokens and OAuth is the only path.
+   */
+  readonly oauthOnly: boolean | undefined;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Sets accurate expectations for connecting an **OAuth-only** MCP server —
+ * one whose hosted endpoint rejects manually-entered static tokens
+ * (`spec.auth.oauth_only`, e.g. Notion, Monday).
+ *
+ * Without this notice a user might expect the (now-hidden) manual token
+ * option and wonder why only "Sign in" is offered. It explains, in one line,
+ * that OAuth is required and a pasted API token would be rejected — turning a
+ * silent constraint into a clear one (Nielsen: visibility of system status).
+ *
+ * Self-gating: renders `null` unless the server is `oauth_only`. Callers
+ * render it unconditionally next to their Connect action, mirroring
+ * {@link StdioSandboxNotice}.
+ *
+ * All visual properties flow through `--stgm-*` design tokens. No
+ * Console-specific dependencies — safe for platform-builder embedding.
+ */
+export function OAuthRequiredNotice({
+  oauthOnly,
+  className,
+}: OAuthRequiredNoticeProps) {
+  if (!oauthOnly) return null;
+
+  return (
+    <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",
+        className,
+      )}
+    >
+      <KeyIcon className="mt-0.5 size-4 shrink-0" />
+      <p className="text-xs 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.
+      </p>
+    </div>
+  );
+}
+
+function KeyIcon({ className }: { 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"
+    >
+      <circle cx="5" cy="11" r="2.5" />
+      <path d="M6.8 9.2 13 3" />
+      <path d="M11 5l1.5 1.5" />
+      <path d="M9 7l1.5 1.5" />
+    </svg>
+  );
+}

package/src/mcp-server/StdioSandboxNotice.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import type { DeploymentMode } from "@stigmer/sdk";
+import type { McpServerSpec } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
+import { useDeploymentMode } from "../deployment-mode.js";
+
+/** The `server_type` oneof discriminator from an MCP server's spec. */
+type McpServerType = McpServerSpec["serverType"];
+
+/**
+ * Whether an MCP server's transport is stdio while connected to Stigmer Cloud.
+ *
+ * stdio servers run as a subprocess inside an isolated Daytona sandbox in the
+ * cloud — not on the user's own computer. This predicate identifies exactly
+ * that combination so the connect UI can set accurate expectations. HTTP
+ * servers and any transport in local mode return `false`.
+ *
+ * Pure and framework-free so it can be unit-tested without rendering.
+ */
+export function isStdioInCloud(
+  mode: DeploymentMode,
+  serverType: McpServerType | undefined,
+): boolean {
+  return mode === "cloud" && serverType?.case === "stdio";
+}
+
+/** Props for {@link StdioSandboxNotice}. */
+export interface StdioSandboxNoticeProps {
+  /** The MCP server's `spec.serverType` oneof. */
+  readonly serverType: McpServerType | undefined;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Sets accurate expectations for connecting an **stdio** MCP server from
+ * **Stigmer Cloud**.
+ *
+ * stdio servers are a supported cloud capability — Stigmer runs them in an
+ * isolated Daytona sandbox. But that sandbox is not the user's own machine,
+ * so a server that expects access to local files, applications, or a private
+ * network (e.g. a filesystem server) won't behave as the user intends. This
+ * notice explains that up front; Connect itself stays enabled because
+ * self-contained servers work fine.
+ *
+ * Self-gating: reads the deployment mode from context and renders `null`
+ * unless the server is stdio and the backend is cloud. Callers render it
+ * unconditionally next to their Connect action.
+ *
+ * All visual properties flow through `--stgm-*` design tokens. No
+ * Console-specific dependencies — safe for platform-builder embedding.
+ */
+export function StdioSandboxNotice({
+  serverType,
+  className,
+}: StdioSandboxNoticeProps) {
+  const mode = useDeploymentMode();
+  if (!isStdioInCloud(mode, serverType)) return null;
+
+  return (
+    <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",
+        className,
+      )}
+    >
+      <SandboxIcon className="mt-0.5 size-4 shrink-0" />
+      <p className="text-xs leading-relaxed">
+        This stdio server runs in an isolated cloud sandbox, not on your own
+        computer. Tools that need access to your local files, applications, or
+        private network won&apos;t be available here.
+      </p>
+    </div>
+  );
+}
+
+function SandboxIcon({ className }: { 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="M2 5.5 8 2.5l6 3-6 3-6-3Z" />
+      <path d="M2 5.5v5l6 3 6-3v-5" />
+      <path d="M8 8.5v5" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { OAuthRequiredNotice } from "../OAuthRequiredNotice";
+
+afterEach(cleanup);
+
+describe("OAuthRequiredNotice", () => {
+  it("renders the OAuth-required caveat when oauth_only is true", () => {
+    render(<OAuthRequiredNotice oauthOnly={true} />);
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.getByText(/requires OAuth/i)).toBeTruthy();
+    // It explains why manual entry is gone, not just that OAuth is used.
+    expect(screen.getByText(/rejects manually-entered API tokens/i)).toBeTruthy();
+  });
+
+  it("renders nothing when oauth_only is false", () => {
+    const { container } = render(<OAuthRequiredNotice oauthOnly={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders nothing when oauth_only is undefined", () => {
+    const { container } = render(<OAuthRequiredNotice oauthOnly={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { McpServerSpec } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
+import { DeploymentModeContext } from "../../deployment-mode";
+import { StdioSandboxNotice, isStdioInCloud } from "../StdioSandboxNotice";
+
+type McpServerType = McpServerSpec["serverType"];
+
+const STDIO = { case: "stdio" } as McpServerType;
+const HTTP = { case: "http" } as McpServerType;
+const UNSET = { case: undefined } as McpServerType;
+
+afterEach(cleanup);
+
+describe("isStdioInCloud", () => {
+  it("is true only for stdio transport in cloud mode", () => {
+    expect(isStdioInCloud("cloud", STDIO)).toBe(true);
+  });
+
+  it("is false for stdio transport in local mode", () => {
+    expect(isStdioInCloud("local", STDIO)).toBe(false);
+  });
+
+  it("is false for http transport in cloud mode", () => {
+    expect(isStdioInCloud("cloud", HTTP)).toBe(false);
+  });
+
+  it("is false when the transport oneof is unset", () => {
+    expect(isStdioInCloud("cloud", UNSET)).toBe(false);
+  });
+
+  it("is false when serverType is undefined", () => {
+    expect(isStdioInCloud("cloud", undefined)).toBe(false);
+  });
+});
+
+function withMode(mode: "cloud" | "local", children: ReactNode) {
+  return (
+    <DeploymentModeContext.Provider value={mode}>
+      {children}
+    </DeploymentModeContext.Provider>
+  );
+}
+
+describe("StdioSandboxNotice", () => {
+  it("renders the sandbox-isolation caveat for stdio in cloud", () => {
+    render(withMode("cloud", <StdioSandboxNotice serverType={STDIO} />));
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.getByText(/isolated cloud sandbox/i)).toBeTruthy();
+  });
+
+  it("does not suggest the CLI (avoids inaccurate guidance)", () => {
+    render(withMode("cloud", <StdioSandboxNotice serverType={STDIO} />));
+    expect(screen.queryByText(/stigmer connect/i)).toBeNull();
+  });
+
+  it("renders nothing for http servers in cloud", () => {
+    const { container } = render(
+      withMode("cloud", <StdioSandboxNotice serverType={HTTP} />),
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders nothing for stdio servers in local mode", () => {
+    const { container } = render(
+      withMode("local", <StdioSandboxNotice serverType={STDIO} />),
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/mcp-server/useMcpServerCredentials.ts

@@ -153,6 +153,18 @@ export interface UseMcpServerCredentialsReturn {
    * link (when vendor approval is granted).
    */
   readonly canBringOwnApp: boolean;
+  /**
+   * `true` when a manually-entered static token is a valid way to
+   * authenticate this server. `false` for `oauth_only` servers whose
+   * hosted endpoint rejects static tokens (`spec.auth.oauth_only`), where
+   * OAuth is the sole credential path.
+   *
+   * Connect surfaces use this to decide whether to offer the "enter token
+   * manually" affordance — offering it on an `oauth_only` server would send
+   * the user down a path that cannot succeed. Always `true` for manual-only
+   * and PAT-capable servers.
+   */
+  readonly manualEntrySupported: boolean;
   /**
    * When `true`, the user has opted to bypass OAuth and enter the
    * `target_env_var` token manually. In this state:
@@ -251,6 +263,14 @@ export function useMcpServerCredentials(
   const oauthTargetEnvVar = auth?.targetEnvVar || null;
   const tokenLifetimeHint = auth?.tokenLifetimeHint || null;
 
+  // A static token is a valid credential for every server except those whose
+  // endpoint declares it rejects them (`oauth_only`). This is the single source
+  // of truth the connect surfaces consult before offering manual entry.
+  const manualEntrySupported = !auth?.oauthOnly;
+  // Defensively force manual override off for oauth_only servers so no surface
+  // can enter a dead-end manual-entry state, even if a stale toggle is set.
+  const effectiveManualOverride = manualOverride && manualEntrySupported;
+
   const oauthStatus = mcpServer?.status?.oauthStatus;
   const isVendorApprovalPending =
     authMode === "oauth" &&
@@ -298,15 +318,15 @@ export function useMcpServerCredentials(
   );
 
   const missingVariables = useMemo(() => {
-    if (!oauthTargetEnvVar || manualOverride) return requiredMissing;
+    if (!oauthTargetEnvVar || effectiveManualOverride) return requiredMissing;
     return requiredMissing.filter((v) => v.key !== oauthTargetEnvVar);
-  }, [requiredMissing, oauthTargetEnvVar, manualOverride]);
+  }, [requiredMissing, oauthTargetEnvVar, effectiveManualOverride]);
 
   const isReady =
     !personalEnv.isLoading &&
     !grantStatus.isLoading &&
     missingVariables.length === 0 &&
-    (authMode === "manual" || manualOverride || isOAuthConnected);
+    (authMode === "manual" || effectiveManualOverride || isOAuthConnected);
 
   const saveCredentials = useCallback(
     async (values: Record<string, EnvVarInput>): Promise<void> => {
@@ -335,6 +355,7 @@ export function useMcpServerCredentials(
     effectiveOAuthSource,
     isOrgOAuthApp,
     canBringOwnApp,
+    manualEntrySupported,
     missingVariables,
     isReady,
     isLoading: personalEnv.isLoading || grantStatus.isLoading,
@@ -342,7 +363,7 @@ export function useMcpServerCredentials(
     saveCredentials,
     isSaving: personalEnv.isMutating,
     refetch,
-    manualOverride,
+    manualOverride: effectiveManualOverride,
     setManualOverride,
   };
 }