[Feat] Add on-demand connection tests for custom MCP servers

apps/docs/integrations/custom-mcp-servers.mdx

@@ -48,6 +48,20 @@ real credentials per request. This means:
   and a task cannot run an **Always ask** tool until its session owner allows
   that exact call.
 
+## Test a remote connection
+
+After saving a remote server, open **Manage tools** on **Integrations** (or in
+Personal Settings for a private server), then select **Test connection**. Each
+test makes a fresh request using the saved URL and authentication and reports
+whether Roomote can retrieve the server's tool catalog. A server with no tools
+can still pass the connection test.
+
+If a test fails, review the displayed error, correct the server's settings or
+reconnect OAuth if needed, and test again. Testing does not execute any tool,
+change tool approval choices, or enable the server. It checks the remote
+connection from Roomote, not execution inside a task sandbox. Local stdio
+servers must be checked in a sandbox instead.
+
 ## OAuth
 
 For servers that support the MCP authorization spec, pick **OAuth** and use

apps/web/src/components/settings/CustomMcpServers.tsx

@@ -755,6 +755,7 @@ function CustomToolManagementDialog({
   onOpenChange: (open: boolean) => void;
 }) {
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
   const { isAdmin } = useAuthorizedUser();
   const [retryError, setRetryError] = useState<{
     serverId: string;
@@ -785,13 +786,39 @@ function CustomToolManagementDialog({
       setRetryError((current) => (current === error ? null : current));
     }
   };
+  const testConnection = async () => {
+    if (!server || toolsQuery.isFetching) return;
+    try {
+      await queryClient.fetchQuery(
+        trpc.customMcpServers.listTools.queryOptions(
+          { id: server.id },
+          { staleTime: 0, retry: false },
+        ),
+      );
+      toast.success(`Connection test passed for ${server.name}.`);
+    } catch {
+      toast.error(`Connection test failed for ${server.name}.`);
+    }
+  };
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent size="2xl">
         <DialogHeader className="pr-6">
-          <DialogTitle>
-            Manage tools for {server?.name ?? 'integration'}
-          </DialogTitle>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <DialogTitle>
+              Manage tools for {server?.name ?? 'integration'}
+            </DialogTitle>
+            <Button
+              variant="outline"
+              size="sm"
+              aria-label={`Test ${server?.name ?? 'integration'} connection`}
+              aria-busy={toolsQuery.isFetching}
+              disabled={toolsQuery.isFetching}
+              onClick={() => void testConnection()}
+            >
+              {toolsQuery.isFetching ? 'Testing…' : 'Test connection'}
+            </Button>
+          </div>
           <DialogDescription>
             Choose how the model can use tools from this integration.
           </DialogDescription>